Колонки одинаковой высоты на jQuery

Колонки одинаковой высоты на jQuery

Вызываем:

$(function() { 
columnConform('#page-wrap > div');
});
$(window).resize(function() {
columnConform('#page-wrap > div');
});

Первые три строки исправляют высоту блоков, а последние три строки отвечают за то, что если будет производиться ресайз окна браузера, то высоты пересчитаются вновь. Если дизайн не резиновый, то последние три строки можно спокойно убрать.

Сама функция:

var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array();

function setConformingHeight(el, newHeight) {
// set the height to something new, but remember the original height in case things change
el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
el.height(newHeight);
}

function getOriginalHeight(el) {
// if the height has changed, send the originalHeight
return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
}

function columnConform(iddiv) {
// find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
$(iddiv).each(function() {
// "caching"
var $el = $(this);
var topPosition = $el.position().top;

if (currentRowStart != topPosition) {
// we just came to a new row. Set all the heights on the completed row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++)
setConformingHeight(rowDivs[currentDiv], currentTallest);

// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = topPosition;
currentTallest = getOriginalHeight($el);
rowDivs.push($el);
}
else {
// another div on the current row. Add it to the list and check if it's taller
rowDivs.push($el);
currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest);

}
// do the last row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++)
setConformingHeight(rowDivs[currentDiv], currentTallest);
});
}
0 comments
  1. Денис
    Денис
    06.09.2016 at 10:53

    Что делать если на странице несколько блоков div#page-wrap

    Reply
Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *

Scroll Up