Скрипт выравнивания высоты блоков
Нашел хороший скрипт, который выравнивает высоту блоков с одним и тем же классом блока, относительно высоты самого заполненного.
window.onload = function() {
setTimeout(function() {
var mainDivs = document.getElementsByClassName("blok1");
var maxHeight = 0;
for (var i = 0; i < mainDivs.length; ++i) {
if (maxHeight < mainDivs[i].clientHeight) {
maxHeight = mainDivs[i].clientHeight;
}
}
for (var i = 0; i < mainDivs.length; ++i) {
mainDivs[i].style.height = maxHeight + "px";
}
}, 1000);
}
Но возникла маленькая проблема. Мне нужно выравнивание нескольких блоков с разными классами. Т.е. допустим есть блоки с классом "blok1", я их выровнял. Теперь нужно еще выровнять все блоки с классом "blok2". Если ниже написать тот же код только с классом "blok2" (в том де js файле где и этот скрипт), то выравнивание происходит теперь только для блоков с классом "blok2". Я в js не силен. Никто не подскажет как допилить это скрипт, чтобы он работал и для других классов тоже? |
Цитата:
Цитата:
А в чем силен? |
Цитата:
|
Цитата:
|
Циклы говорите... Т.е. обернуть скрипт в цикл пока он его не выполнит для всех классов? Только камнями не кидайте, если бред сейчас написал:)
|
Цитата:
Как вариант...
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function() {
var a=[
'blok1',
'blok2',
'blokN'
];
for (var i=0; i<a.length; i++) {
setTimeout((function(Name) {
return function () {correctionHeight(Name);};
})(a[i]), 1000);
};
};
function correctionHeight(Name) {
/* две стороки ниже убрать */
alert(Name);
return
var mainDivs = document.getElementsByClassName(Name);
var maxHeight = 0;
for (var i = 0; i < mainDivs.length; ++i) {
if (maxHeight < mainDivs[i].clientHeight) {
maxHeight = mainDivs[i].clientHeight;
}
}
for (var i = 0; i < mainDivs.length; ++i) {
mainDivs[i].style.height = maxHeight + "px";
}
};
</script>
</head>
<body>
</body>
</html>
|
Или вовсе поколхозному... :D
window.onload = function() {
setTimeout(function() {
correctionHeight('blok1');
}, 1000);
setTimeout(function() {
correctionHeight('blok2');
}, 1000);
setTimeout(function() {
correctionHeight('blokN');
}, 1000);
};
|
Или всех скопом! :D
window.onload = function() {
setTimeout(function() {
correctionHeight('blok1');
correctionHeight('blok2');
correctionHeight('blokN');
}, 1000);
};
|
Ааааа. Заработало :dance:
Первый вариант! СПАСИБО)))) Т.е. как я понял первая часть что-то вроде перебирает классы, а вторая уже непосредственно делает дело? |
Цитата:
|
| Часовой пояс GMT +3, время: 03:07. |