Одинаковая высота у DIV элементов в строке
Есть много решений для выравнивания DIV блоков по высоте с помощью JQuery (например matchHeight.js).Основная идея заключается в измерении высоты каждого отдельно взятого блока, а затем присваивание всем значение от самого высокого.
Но что делать, если есть несколько рядов с блоками, и вы хотите, чтобы каждая строка равнялась по своему наивысшему блоку? Подобная задача может возникнуть из за разного количества контента в блоке.
Весь фокус заключается в том, что наш скрипт измеряет верхнюю позицию. Соответственно можно рассчитать какой блок принадлежит к конкретной строке и изменять высоту блоков только в этой строке.
Собственно код:
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$('.blocks').each(function() {
$el = $(this);
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++) {
rowDivs[currentDiv].height(currentTallest);
}
// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = topPosition;
currentTallest = $el.height();
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 < $el.height()) ? ($el.height()) : (currentTallest);
}
// do the last row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
$('.blocks') будет использовать CSS селектор что бы выровнять высоту DIV блоков по самому высокому в строке.
Что насчёт адаптивности?
Одной из главных причин против использования табличной разметки является адаптация к тянущимся блокам, которые будут перегруппировываться в зависимости от размера экрана. Данный код каждый раз пересчитывает высоту блоков при изменении размера окна.