Существует достаточно много решений для выставления одинаковой высоты для столбцов на jQuery (например, такое решение). Основная идея заключается в том, чтобы измерить высоту всех столбцов, а затем выставить для всех наибольшую.
Но что, если строк несколько, а контент неоднородный? Тогда пригодится следующий сниппет...
Stephen Akins выдвинул следующую идею, как решить такую задачу. Идея примерно такая же, но кроме того, замеряются позиции высот блоков, чтобы узнать, какие блоки расположены в одной строке. После, можно выставлять высоту только тем блокам, которые расположены на одной высоте.
Вот так получился следующий код.
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$('.blocks').each(function() {
$el = $(this);
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
// 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 = topPostion;
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') конечно же могут быть заменены на нужные вам.
Если же вы имеете дело с блоками разной ширины, то и это можно реализовать, если добавить в сниппет замеры широт блоков и повесить сниппет на изменение размеров окна браузера.
$(window).resize(function() {
equalizeThoseMoFos();
}