使用jQuery为div设置相等的高度

使用jQuery为div设置相等的高度

回答您的特定问题

您的代码正在检查任何容器中的所有列，您需要做的是：

• 遍历每个容器
  • 获取该容器中每一列的高度
  • 找到最高的
  • 在继续进行下一列之前，将该高度应用于该容器中的每一列。

注意：尝试为您的问题提供示例jsfiddle，它使我们能够更轻松地帮助您并理解问题，您可以立即查看有效的解决方案，并鼓励更快地做出响应。

快速（粗略）示例

$(document).ready(function(){    // Select and loop the container element of the elements you want to equalise    $('.container').each(function(){      // Cache the highest      var highestBox = 0;      // Select and loop the elements you want to equalise      $('.column', this).each(function(){        // If this box is higher than the cached highest then store it        if($(this).height() > highestBox) {          highestBox = $(this).height();        }      });      // Set the height of all those children to whichever was highest      $('.column',this).height(highestBox);    });});.container { border 1px solid red; }.column { border: 1px solid blue; float:left; width: 30%; text-align:center; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><div >    <div >This is<br />the highest<br />column</div>    <div >One line</div>    <div >Two<br />lines</div></div><div >    <div >One line</div>    <div >Two<br>lines</div>    <div >One line</div></div>

图书馆！

我发现这是一个图书馆，如果您需要一些更聪明的均衡控件，这看起来很有希望

http://brm.io/jquery-match-height-demo/

---

解决@Mem的问题

问题 ：

$(document).ready()

如果您有需要加载的图像而这些图像又会改变容器的高度，则可以使用吗？

加载图像后均衡高度

如果要加载图像，您会发现此解决方案并不总是有效。这是因为它

document.ready

是在最早的时间触发的，这意味着它不等待外部资源（例如图像）被加载。

当图像最终加载时，运行均衡脚本后，它们可能会扭曲其容器的高度，从而导致其看起来也不太正常。

用图像求解高度均衡

1. 绑定到图像加载事件

这是最好的解决方案（在撰写本文时），并且涉及到绑定

img.load

事件。所有你需要做的是了解有多少IMG公司有一个数

$('img').length

，然后每个

load

，

-1

从数，直到你打零，那么火的均衡度。

load

如果图像在缓存中，则可能无法在所有浏览器中触发此处的警告。环顾google /
github，那里应该有一个解决方案脚本。在撰写本文时，我发现了AlexanderDickson的waitForImages（未经测试，这不是背书）。

1. window.load

   事件是另一个更可靠的解决方案。通常这应该总是有效的。但是，如果您将文档签出，则会注意到在加载所有外部资源后触发此事件。这意味着，如果您的图片已加载，但是有一些javascript等待下载，则在完成之前不会触发。

如果您异步加载大多数外部设备，并且巧妙地最小化，压缩和分散负载，则此方法可能不会出现任何问题，但是CDN突然变慢（一直发生）可能会引起问题。

在这两种情况下，您都可以采取愚蠢的方法并应用备用计时器。让均衡脚本在设置的几秒钟后自动运行，以防万一该事件不触发或某些事情变得缓慢而无法控制。这不是万无一失的方法，但实际上，如果您正确调整计时器，您将通过这种后备方式满足99％的访问者的需求。