457 Существует достаточно много решений для выставления одинаковой высоты для столбцов на jQuery (например, ). Основная идея заключается в том, чтобы измерить высоту всех столбцов, а затем выставить для всех наибольшую.
Но что, если строк несколько, а контент неоднородный? Тогда пригодится следующий сниппет...
Stephen Akins выдвинул следующую идею, как решить такую задачу. Идея примерно такая же, но кроме того, замеряются позиции высот блоков, чтобы узнать, какие блоки расположены в одной строке. После, можно выставлять высоту только тем блокам, которые расположены на одной высоте.
Вот так получился следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
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') конечно же могут быть заменены на нужные вам.
Если же вы имеете дело с блоками разной ширины, то и это можно реализовать, если добавить в сниппет замеры широт блоков и повесить сниппет на изменение размеров окна браузера.
|
1 2 3 |
$(window).resize(function() { equalizeThoseMoFos(); } |
Перевод статьи с
PS. Веб-мастерам понятно, что достаточно прибыльное дело, так развитие Интернета идет семимильными шагами.
