Адаптивно верстая рубрики под Вордпрес многие, в том числе и я, сталкиваются с проблемой смещения блоков из-за их неодинаковой высоты. Решить проблему можно по-разному. Лично я прибегаю к скриптам.
Скрипт, представленный ниже, выравнивает высоту блоков с одним и тем же классом блока, относительно высоты самого заполненного. Т.е. после загрузки страницы просходит выборка всех блоков с классом s1, определяется высота каждого, затем определяется наибольшее значение, которое присваивается всем без исключения блокам, с классом s1.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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), затем определяется самый высокий и остальные блоки получают его значение
|
1 2 3 4 5 6 7 8 |
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")); }); |
