行内等高块

使用 jQuery（例如 matchHeight.js）有很多实现等高列的解决方案。基本思路是测量所有列的高度，然后将所有列的高度设置为最高列的高度。

但是，如果有多行块，而您只想将高度增加以匹配当前行呢？这可能是由于每个框中具有不同大小的缩略图或不同数量的文本造成的。

Stephen Akins 发布了一个巧妙的想法 来解决这个问题。这个想法大体相同，测试 div 的高度并将它们设置为最高的高度，但在执行此操作之前，它会测量顶部位置。由此，它能够确定哪些 div 属于哪一行，并且只影响该行内的 div。

这是整个代码。我只是从 Stephen 的原始代码中稍微调整了一下，使其效率更高。

// 立即执行函数 (IIFE)
(function() {

var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array();

function setConformingHeight(el, newHeight) {
// 将高度设置为新值，但记住原始高度以防发生更改
el.data(“originalHeight”, (el.data(“originalHeight”) == undefined) ? (el.height()) : (el.data(“originalHeight”)));
el.height(newHeight);
}

function getOriginalHeight(el) {
// 如果高度已更改，则发送 originalHeight
return (el.data(“originalHeight”) == undefined) ? (el.height()) : (el.data(“originalHeight”));
}

function columnConform() {

// 查找行中最高的 DIV，并将所有 DIV 的高度设置为与其匹配。
$(‘.blocks’).each(function() {

// “缓存”
var $el = $(this);

var topPosition = $el.position().top;

if (currentRowStart != topPosition) {

// 我们刚刚进入新的一行。设置已完成行上的所有高度
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); // 设置新行的变量 rowDivs.length = 0; // 清空数组 currentRowStart = topPosition; currentTallest = getOriginalHeight($el); rowDivs.push($el); } else { // 当前行上的另一个 div。将其添加到列表中，并检查它是否更高 rowDivs.push($el); currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest); } }); // 处理最后一行 for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { setConformingHeight(rowDivs[currentDiv], currentTallest); } } // 如果内容可能会更改... 可能需要去抖动并运行此函数。 // $(window).resize(function() { // columnConform(); // }); // DOM 就绪 // 如果图像导致块高度不一致，您可能还需要等到 window.onload $(function() { columnConform(); }); })(); $('.blocks') 将更改为使用您需要均衡的任何 CSS 选择器。或者让函数接受选择器作为参数或其他什么。

流体宽度怎么办？

不使用表格的主要原因之一是，浮动 div 可以根据可用的水平空间重新排列自身，这对于流体宽度非常有用。我们也可以调整上述代码来处理这种情况。基本上，第一次运行此代码时，我们将测量每个块的高度并使用 jQuery 的 data() 方法记住它。然后，当窗口大小调整大小时，再次运行代码，但使用原始大小来调整行，而不是新大小。

此演示具有流体宽度。如果您需要该代码，只需查看源代码并获取它即可。

查看演示

希望它没有 jQuery 依赖项？

• Ben Howdle：轻松实现等高
• Vitalii Skorokhod：javascript 等高块

\