Javascript Div 最高

Question

我试图让一排 div 都与最高的那个的高度相匹配，所以它们看起来是统一的。

我已经阅读了很多这方面的资料，但似乎找不到任何适用于跨浏览器的解决方案。

我目前使用的脚本是:

    var maxHeight = 1;

    $('.thumbnail').each(function() {
        maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
    });

    $('.thumbnail').each(function() {
        $(this).height(maxHeight);
    });

逻辑上我不明白为什么这行不通？

在 Firefox 中运行良好，但在 Chrome 和 Safari 中似乎会导致问题。

这里有一个 fiddle 供您使用:http://jsfiddle.net/UtMz3/

真正奇怪的是它确实在 fiddle 中起作用，但在我的网站上却不起作用。

更新

所以发生的事情是 Chrome 在将图像加载到其中之前获取 DIV 高度。所以 Chrome 获取 DIV 大小，比方说 120px，然后加载图像，从而将 DIV 大小更改为更接近 290px。我不明白为什么会这样，似乎在 $(document).ready({}) 包装器中应该可以解决这个问题。我也试过将 JavaScript 放在页面底部，但结果仍然相同。

非常感谢任何想法或意见， 亲切的问候， 詹姆斯

Answer 1

您需要检查如何将内容放入这些 div 中。如果 $(document).ready() 上还没有，那么内容可能正在动态添加，您需要等到添加后才能测量。

您如何等待内容出现取决于它是如何被添加的。

$(document).ready() 不等待图像加载。您需要为此使用 $(window).load()，因此如果内容包含图像，则您需要找到一种方法来等待它们加载。 $(window).load() 将等待所有图像加载，或者您可以在每个尚未加载的图像对象上安装 load 事件处理程序，以便在加载时收到通知他们完成加载。