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

回答您的具体问题

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

• 循环通过每个容器
  • 获取该容器中每列的高度
  • 找到最高的一个
  • 将该高度应用于该容器中的每个列,然后再转到下一个列.

注意:尝试提供一个问题的示例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,然后为每个img load,-1从那个计数直到你达到零,然后激发均衡器.

load如果图像在缓存中,则此处的警告可能不会在所有浏览器中触发.环顾谷歌/ github,应该有一个解决方案脚本.在撰写本文时,我发现了Alexander Dickson的waitForImages(未经测试,这不是代言).

2. 另一个更可靠的解决方案是该window.load活动.这应该总是有效.但是,如果您检查文档,您会注意到在加载所有外部资源后会触发此事件.这意味着如果您的图像已加载但有一些javascript等待下载它将不会触发,直到完成.

如果您异步加载大部分外部设备并且在最小化,压缩和传播负载方面很聪明,那么这种方法可能不会有任何问题,但是突然放慢CDN(一直发生)可能会导致问题.

在这两种情况下,您都可以采用愚蠢的方法并应用后备计时器.让equize脚本在设置几秒后自动运行,以防万一事件没有触发或者某些事情发生在您的控制之外.这不是万无一失的,但实际上,如果你正确地调整计时器,你将满足99%的访客.

Answer 2

$(document).ready(function(){

    $('.container').each(function(){  
        var highestBox = 0;

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

        $(this).find('.column').height(highestBox);
    });    


});

Answer 3

你需要这个:

$('.container').each(function(){  
     var $columns = $('.column',this);
     var maxHeight = Math.max.apply(Math, $columns.map(function(){
         return $(this).height();
     }).get());
     $columns.height(maxHeight);
});

说明

• 以下代码段构造了一个高度数组:

  $columns.map(function(){
      return $(this).height();
  }).get()
  

• Math.max.apply( Math, array ) 找到最大数组项

• $columns.height(maxHeight); 将所有列的高度设置为最大高度.

现场演示

Answer 4

重要改进！（我添加了 $(this).height('auto'); 在测量高度之前 - 我们应该将其重置为自动。然后我们可以在调整大小时使用此功能）

function equalheight () {
            $('.cont_for_height').each(function(){  

                var highestBox = 0;
                $('.column_height', this).each(function(){

                    var htmlString = $( this ).html()

                    ;


                $(this).height('auto');

                    if($(this).height() > highestBox) 
                       highestBox = $(this).height(); 
                });  

                $('.column_height',this).height(highestBox);

        });  

        }