一尘不染

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

html

我想为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以达到此目的?

谢谢!


阅读 268

收藏
2020-05-10

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

2020-05-10