原文地址: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(); }