Javascript Div Tallest

Javascript Div Tallest

本文关键字：Tallest Div Javascript      更新时间：2023-09-26

我正在尝试使一行div的高度都与最高的div的高度相匹配，因此它们看起来是统一的。

我已经读了很多关于这个，但似乎找不到任何解决方案，跨浏览器的工作。

我当前使用的脚本是:

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

逻辑上我看不出为什么这不行?

在Firefox中可以正常工作，但在Chrome中似乎会引起问题&Safari .

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

真正奇怪的是，它在小提琴上工作，但不是在我的网站上。

更新

所以发生的事情是，Chrome是抓取DIV高度之前的图像加载到它。所以Chrome抓取DIV的大小让我们说120px，然后图像被加载，因此改变DIV的大小更像290px。我不知道为什么会发生这种情况，似乎在$(document).ready({})包装器中应该解决这个问题。我也试过把JavaScript放在页面的底部，但结果还是一样。

任何想法或评论都非常感谢。亲切的问候,詹姆斯。

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

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

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

相关文章：