jquery - 使用 jQuery 为 div 设置相同的高度

Question

我想用 jQuery 为 div 设置相同的高度。 所有的 div 可能有不同的内容量和不同的默认高度。这是我的 html 布局示例:

<div class="container">
    <div class="column">This is<br />the highest<br />column</div>
    <div class="column">One line</div>
    <div class="column">Two<br />lines</div>
</div>
<div class="container">
    <div class="column">One line</div>
    <div class="column">Two<br>lines</div>
    <div class="column">One line</div>
</div>

我正在使用下一个 jQuery 函数设置高度:

$(document).ready(function(){

    var highestBox = 0;
        $('.container .column').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('.container .column').height(highestBox);

});

这很好用，但在我的情况下不行，因为我希望所有“列”只在一个“容器”内相等。这意味着在第一个容器中，所有框的高度必须与第一个 div 一样高，但在第二个容器中，它们必须等于第二列。

所以问题是——我应该如何修改我的 jQuery 来达到这个目的？

谢谢!

Answer 1

回答您的具体问题

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

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

Note: Try to provide an example jsfiddle of your issue, it enables us to more easily help you and understand the issue, you get to see the working solution straight away and it encourages quicker responses.

快速(粗略)示例

$(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 class="container">
    <div class="column">This is<br />the highest<br />column</div>
    <div class="column">One line</div>
    <div class="column">Two<br />lines</div>
</div>
<div class="container">
    <div class="column">One line</div>
    <div class="column">Two<br>lines</div>
    <div class="column">One line</div>
</div>

Library!

Here's a library i found that looks promising if you want some more clever equalisation controls

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

---

解决@Mem 的问题

Question: Will $(document).ready() work if you have images that need to load which in turn modify the heights of the containers?

图像加载后均衡高度

如果您正在加载图像，您会发现此解决方案并不总是有效。这是因为 document.ready is fired at the earliest possible time ，这意味着它不会等待加载外部资源(例如图像)。

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

用图像解决等高问题

1. 绑定(bind)图片加载事件

这是最佳解决方案(在撰写本文时)并涉及绑定(bind)到 img.load 事件。您所要做的就是计算 $('img').length 有多少 img，然后对于每个 load，-1 从那个计数开始，直到你达到零，然后启动均衡器。

这里需要注意的是，如果图像在缓存中，load 可能不会在所有浏览器中触发。环顾 google/github，那里应该有一个解决方案脚本。在撰写本文时，我发现 waitForImages from Alexander Dickson (未经测试，这不是背书)。

1. 另一个更可靠的解决方案是 window.load事件。这通常应该始终有效。但是，如果您检查 docs out，您会注意到此事件在加载所有外部资源后触发。这意味着如果您的图像已加载但有一些 javascript 正在等待下载，则在下载完成之前它不会触发。

如果您以异步方式加载大部分外部组件，并且巧妙地最小化、压缩和分散负载，您使用此方法可能不会遇到任何问题，但是突然变慢的 CDN(一直发生)可能会导致问题。

在这两种情况下，您都可以采用愚蠢的方法并应用回退计时器。让均衡脚本在设定的几秒钟后自动运行，以防万一事件没有触发或某些事情变慢了您的控制。这并非万无一失，但实际上，如果您正确调整计时器，您将通过这种回退方式满足 99% 的访问者。

多年后，这仍然得到支持，如今 flexbox 得到广泛支持，您可能只想为此考虑纯 CSS，除非有特定原因您为此使用 JS

.container {
  display: flex;
  border: 2px dashed red;
  margin: 10px 0;
}

.container > .column { 
 padding: 10px;
}

.container.fill-width {
  justify-content: stretch;
}

.container.fill-width>.column {
  flex-grow: 1
}

.container>.column:nth-child(1) {
  background: yellow;
}

.container>.column:nth-child(2) {
  background: blue;
}

.container>.column:nth-child(3) {
  background: green;
}

<div class="container">
  <div class="column">Some<br>text</div>
  <div class="column">Some<br>more<br>text<br>here</div>
  <div class="column">One line</div>
</div>
<div class="container">
  <div class="column">Some<br>more<br>even<br>longer<br>text<br>here</div>
  <div class="column">Some<br>text</div>
  <div class="column">One line</div>
</div>
<div class="container fill-width">
  <div class="column">Some<br>more<br>text<br>here</div>
  <div class="column">Some<br>text</div>
  <div class="column">One line</div>
</div>