Одинаковая высота у DIV элементов в строке

jQuery-плагины вроде matchHeight.js выравнивают все блоки под одну высоту. Но что если блоки занимают несколько строк и в каждой строке высота должна соответствовать только самому высокому блоку в этой строке?

Весь трюк заключается в измерении позиции блоков по оси Y. Зная позицию, можно вычислить к какой строке принадлежит блок и изменить высоту только блоков в этой строке.

JavaScript-решение

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

$('.blocks').each(function() {
  $el = $(this);
  topPosition = $el.position().top;

  if (currentRowStart != topPosition) {
    for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
      rowDivs[currentDiv].height(currentTallest);
    }
    rowDivs.length = 0;
    currentRowStart = topPosition;
    currentTallest = $el.height();
    rowDivs.push($el);
  } else {
    rowDivs.push($el);
    currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }

  for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
    rowDivs[currentDiv].height(currentTallest);
  }
});

Адаптивность

Скрипт пересчитывает высоту блоков при каждом изменении размера окна браузера, адаптируясь к адаптивным макетам, где блоки перестраиваются в зависимости от ширины экрана:

$(window).resize(function() {
  // сброс высот перед пересчётом
  $('.blocks').height('auto');
  // повторный запуск функции выравнивания
  equalizeHeights();
});