使用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);

});

这很好用，但对我而言不是，因为我希望所有“列”仅在一个“容器”内相等。这意味着在第一个容器中，所有框必须与第一格一样高，但在第二个容器中，它们必须等于第二列。

所以问题是-我应该如何修改jQuery以达到此目的？

谢谢！

Answer 1

回答您的特定问题

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

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

注意：尝试为您的问题提供示例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 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>

图书馆！

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

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％的访问者的需求。