Вход

Просмотр полной версии : Скрипт выравнивания высоты блоков

razorg1991
27.08.2013, 14:26
Нашел хороший скрипт, который выравнивает высоту блоков с одним и тем же классом блока, относительно высоты самого заполненного.

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 не силен. Никто не подскажет как допилить это скрипт, чтобы он работал и для других классов тоже?
ksa
27.08.2013, 14:28
как допилить это скрипт, чтобы он работал и для других классов тоже?
Открой для себя параметры функций и циклы...

Я в js не силен.
А, ну да... :cray:

А в чем силен?
razorg1991
27.08.2013, 14:46
Открой для себя параметры функций и циклы...


А, ну да... :cray:

А в чем силен?

ну php более менее знаю, он как-то попроще
ksa
27.08.2013, 14:48
ну php более менее знаю, он как-то попроще
Там так же есть функции, параметры функций и циклы...
razorg1991
27.08.2013, 14:58
Циклы говорите... Т.е. обернуть скрипт в цикл пока он его не выполнит для всех классов? Только камнями не кидайте, если бред сейчас написал:)
ksa
27.08.2013, 14:58
Т.е. обернуть скрипт в цикл пока он его не выполнит для всех классов?
Неее. Не так.

Как вариант...

<!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>
ksa
27.08.2013, 15:02
Или вовсе поколхозному... :D

window.onload = function() {
setTimeout(function() {
correctionHeight('blok1');
}, 1000);
setTimeout(function() {
correctionHeight('blok2');
}, 1000);
setTimeout(function() {
correctionHeight('blokN');
}, 1000);
};
ksa
27.08.2013, 15:03
Или всех скопом! :D

window.onload = function() {
setTimeout(function() {
correctionHeight('blok1');
correctionHeight('blok2');
correctionHeight('blokN');
}, 1000);
};
razorg1991
27.08.2013, 15:10
Ааааа. Заработало :dance:

Первый вариант! СПАСИБО))))
Т.е. как я понял первая часть что-то вроде перебирает классы, а вторая уже непосредственно делает дело?
ksa
27.08.2013, 15:17
перебирает классы
Там нет никаких классов... :blink:
razorg1991
27.08.2013, 15:20
Ну я не правильно выразился. переменной "а" присваиваются значения "blok1", "blok2" и т.д. (просто это названия классов для блоков)
ksa
27.08.2013, 15:22
переменной "а" присваиваются значения "blok1", "blok2" и т.д.
Это массив! :)
razorg1991
27.08.2013, 15:23
Это массив! :)

А ну да... блин точно:D Я гоню)))
garfild304
15.01.2017, 00:04
Помогите пожалуйста...как сделать что бы блоки меньше 100 px в длину не затрагивались... (остались как есть).



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);
}