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 arraycurrentRowStart = 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();}