Два скрипта по выравниванию блоков по вертикали

Адаптивно верстая рубрики под Вордпрес многие, в том числе и я, сталкиваются с проблемой смещения блоков из-за их неодинаковой высоты. Решить проблему можно по-разному. Лично я прибегаю к скриптам.

Скрипт, представленный ниже, выравнивает высоту блоков с одним и тем же классом блока, относительно высоты самого заполненного. Т.е. после загрузки страницы просходит выборка всех блоков с классом s1, определяется высота каждого, затем определяется наибольшее значение, которое присваивается всем без исключения блокам, с классом s1.

window.onload = function() {
	setTimeout(function() {
		var mainDivs = document.getElementsByClassName("s1");
		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);
}

Наверняка вы заметили, что основным достоинством данного скрипта является то, что для его работы не требуется jQuery.
Существует, также, модификация данного скрипта, которую можно найти тут.

Второй скрипт, о котором хочу рассказать, наоборот, требует подключения jQuery. Его принцип иной. Блоки, которые необходимо выравнять, помещают в контейнер-обертку (в нашем случае это wrapper), затем определяется самый высокий и остальные блоки получают его значение

var $jq = jQuery.noConflict(); // устраняем конфликт jQuery в Вордпресс
function setEqualHeight(columns) {
	var tallestcolumn = 0;
	columns.each(function(){currentHeight = $jq(this).height();
	if(currentHeight > tallestcolumn) {tallestcolumn=currentHeight;}});
	columns.height(tallestcolumn);
}
$jq(document).ready(function() {
	setEqualHeight($jq(".wrapper > div"));
});
Рейтинг: 5

2022-07-01 / / 0 комментариев / Про кодинг и сервер / ,