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, currentRowStart = 0, rowDivs = new Array(), $el, topPosition = 0; $('.blocks').each(function() { $el = $(this); topPostion = $el.position().top; if (currentRowStart != topPostion) { // 刚刚进入新的一行。将上一行的所有div统一设定高度 for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } // 为新的一行重新设置参数值 rowDivs.length = 0; // empty the array currentRowStart = topPostion; currentTallest = $el.height(); rowDivs.push($el); } else { // 同一行中下一个div，将它加入list，并检测它是否比当前的最高值更高 rowDivs.push($el); currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); } // 为最后一行中的div统一设定高度 for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } });

 

$('.blocks')可以被替换为任何用来表示需要同一高度的元素的CSS选择符。

 
如果要处理动态宽度，可以将以上代码封装进一个function。当调整窗口大小的时候，可以理解调用它。

 

$(window).resize(function() { equalizeThoseMoFos(); }