Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрипт выравнивания высоты блоков (https://javascript.ru/forum/dom-window/40990-skript-vyravnivaniya-vysoty-blokov.html)

razorg1991 27.08.2013 13: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 13:28

Цитата:

Сообщение от razorg1991
как допилить это скрипт, чтобы он работал и для других классов тоже?

Открой для себя параметры функций и циклы...

Цитата:

Сообщение от razorg1991
Я в js не силен.

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

А в чем силен?

razorg1991 27.08.2013 13:46

Цитата:

Сообщение от ksa (Сообщение 269531)
Открой для себя параметры функций и циклы...


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

А в чем силен?

ну php более менее знаю, он как-то попроще

ksa 27.08.2013 13:48

Цитата:

Сообщение от razorg1991
ну php более менее знаю, он как-то попроще

Там так же есть функции, параметры функций и циклы...

razorg1991 27.08.2013 13:58

Циклы говорите... Т.е. обернуть скрипт в цикл пока он его не выполнит для всех классов? Только камнями не кидайте, если бред сейчас написал:)

ksa 27.08.2013 13:58

Цитата:

Сообщение от razorg1991
Т.е. обернуть скрипт в цикл пока он его не выполнит для всех классов?

Неее. Не так.

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

<!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 14:02

Или вовсе поколхозному... :D

window.onload = function() {
	setTimeout(function() {
		correctionHeight('blok1');
	}, 1000);
	setTimeout(function() {
		correctionHeight('blok2');
	}, 1000);
	setTimeout(function() {
		correctionHeight('blokN');
	}, 1000);
};

ksa 27.08.2013 14:03

Или всех скопом! :D

window.onload = function() {
	setTimeout(function() {
		correctionHeight('blok1');
		correctionHeight('blok2');
		correctionHeight('blokN');
	}, 1000);
};

razorg1991 27.08.2013 14:10

Ааааа. Заработало :dance:

Первый вариант! СПАСИБО))))
Т.е. как я понял первая часть что-то вроде перебирает классы, а вторая уже непосредственно делает дело?

ksa 27.08.2013 14:17

Цитата:

Сообщение от razorg1991
перебирает классы

Там нет никаких классов... :blink:


Часовой пояс GMT +3, время: 08:28.