Equal Height Blocks in Rows（統一行中的塊的高度）

原文地址：http://css-tricks.com/equal-height-blocks-in-rows/

 

通過使用jQuery，有很多方法可以將多個列調整為同一高度（比如Rob Glazebrook的這個方法
）。主要思路就是通過測量各個列的高度，然後將其中最大的高度值指定給各個列。

但是，如果一個塊中有多個行存在，而你只想在每一行中統一行中各個塊的高度，該怎麼辦呢？當某一行中包括不同尺寸的縮圖或者不同尺寸的文字區塊時，就可能會遇到這個問題。

 

Stephen Akins提出了一個巧妙的解決辦法
。主要思路不變，還是測量每個div的高度，然後將最大的高度值指定給各個div。但在這之前，需要先查看每個div的top位置，從而獲知哪些div是屬於同一行的，然後針對這一行再同一高度值。

這就是全部過程。我（作者）將Stephen的原始代碼做了點小最佳化，以使它更高效一些。

 

var currentTallest = 0,<br />currentRowStart = 0,<br />rowDivs = new Array(),<br />$el,<br />topPosition = 0;<br />$('.blocks').each(function() {<br />$el = $(this);<br />topPostion = $el.position().top;<br />if (currentRowStart != topPostion) {<br />// 剛剛進入新的一行。將上一行的所有div統一設定高度<br />for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {<br />rowDivs[currentDiv].height(currentTallest);<br />}</p><p>// 為新的一行重新設定參數值<br />rowDivs.length = 0; // empty the array<br />currentRowStart = topPostion;<br />currentTallest = $el.height();<br />rowDivs.push($el);<br />} else {<br />// 同一行中下一個div，將它加入list，並檢測它是否比當前的最高值更高<br />rowDivs.push($el);<br />currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);<br />}<br />// 為最後一行中的div統一設定高度<br />for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {<br />rowDivs[currentDiv].height(currentTallest);<br />}<br />});

 

$('.blocks')可以被替換為任何用來表示需要同一高度的元素的CSS選擇符。

 
如果要處理動態寬度，可以將以上代碼封裝進一個function。當調整視窗大小的時候，可以理解調用它。

 

$(window).resize(function() {<br />equalizeThoseMoFos();<br />}