Адаптивно верстая рубрики под Вордпрес многие, в том числе и я, сталкиваются с проблемой смещения блоков из-за их неодинаковой высоты. Решить проблему можно по-разному. Лично я прибегаю к скриптам.
Скрипт, представленный ниже, выравнивает высоту блоков с одним и тем же классом блока, относительно высоты самого заполненного. Т.е. после загрузки страницы просходит выборка всех блоков с классом 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"));
});
Рейтинг: 