设置相等的高度为div的使用jQuery(Setting equal heights for div

2019-06-17 13:39发布

站内文章 / 移动开发
15 0 0

我想设置相同高度与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/


解决@纪念品的问题

问 ：请问$(document).ready()的工作，如果你有需要加载依次修改容器的高度图像？


图像负载均衡后高度

如果您正在加载图片，你会发现，这种解决方案并不总是奏效。 这是因为document.ready是在尽可能早的时间烧制 ，这意味着它不等待在被加载（例如，图像）的外部资源。

当你的图像加载。最后，他们可能会在均衡脚本运行后歪曲其包装容器的高度，使其显得太没有太多工作。


解决与图像高度均衡

  1. 绑定到图像加载事件

这是最好的解决方法（在写作的时间），包括结合img.load事件。 所有你需要做的是了解有多少IMG公司有一个数$('img').length ，然后对每个load ， -1从计数，直到你打零，那么火的均衡度。

这里需要说明的是load如果图像是在缓存中可能不会触发在所有浏览器。 环顾四周，谷歌/ github上，应该有一个解决方案脚本在那里。 在写这篇文章的时候，我发现从亚历山大迪克森waitForImages （未经测试，这不是背书）。

  1. 另一个更可靠的解决方案是window.load事件。 这应该始终一般工作。 但是，如果检查文档了，你所有的外部资源加载通知后，触发这个事件。 这意味着，如果你的图像加载，但有一些JavaScript等待下载它不会火，直到完成。

如果加载了广大你的外部asyncronously和聪明有减少，压缩和扩展的负载，你可能不会有任何问题，用这种方法，然而忽慢CDN（发生的时间），可能会导致问题。

在这两种情况下，你可以采取一个愚蠢的方法，并申请备用计时器。 有一组在几秒后自动运行脚本平衡用以防万一的情况下不闪光或东西是缓慢的在你的控制。 这不是糊弄的证据，但在现实中，你会如果你调整计时器准确的满足您的访问者的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:

重要的改进！ （我加$（本）.height（“自动”）;测量高度之前 - 我们应该把它重新设置自动然后我们可以使用调整大小此功能） 

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

        });  

        }


Answer 5:

这是我的版本在同一HIGHT设置块的......例如你有一个divthat包含的div名称为“关口” 

$('.col').parent().each(function() {
    var height = 0,
        column = $(this).find('.col');
    column.each(function() {
        if ($(this).height() > height) height = $(this).height();
    });
    column.height(height);
});


Answer 6:

 var currentTallest = 0, currentRowStart = 0, rowDivs = new Array(), $el, topPosition = 0; $('.blocks').each(function() { $el = $(this); topPostion = $el.position().top; if (currentRowStart != topPostion) { // we just came to a new row. Set all the heights on the completed row for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } // set the variables for the new row rowDivs.length = 0; // empty the array currentRowStart = topPostion; currentTallest = $el.height(); rowDivs.push($el); } else { // another div on the current row. Add it to the list and check if it's taller rowDivs.push($el); currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); } // do the last row for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } });​ 
 $('.blocks') would be changed to use whatever CSS selector you need to equalize.



Answer 7:

  <script>
function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
}
$(document).ready(function() {
   equalHeight($(".column"));
});
</script>


Answer 8:

您需要imagesLoaded如果容器有内部图像。 这适用于敏感了。 

$(document).ready(function () { 
     equalHeight('.column');
});
$(window).resize(function(){equalHeight('.column');});

function equalHeight(columnClass){
    $('.eq-height-wrap').imagesLoaded(function(){
        $('.eq-height-wrap').each(function(){  

            var maxHeight = Math.max.apply(null, $(this).find(columnClass).map(function ()
            {
                return $(this).innerHeight();
            }).get());

            $(columnClass,this).height(maxHeight);
        });
    });
}


Answer 9:

因此，jQuery脚本下方设置等高列其中Math.max将计算两个div高度，并采取最高高度要么可以向左或向右。 

$(document).ready(function() {
var Equalheights = Math.max($(“#left”).height(), $(“#right”).height());
$(“#left”). Equalheights(d);
$(“#right”). Equalheights(d);
});
Highest height will be assigned to both left and right divs

现场演示



Answer 10:

你可以写的函数这种方式也是这有助于只是建立你的代码，一个时间，在末尾添加类名或ID 

function equalHeight(group) {
               tallest = 0;
               group.each(function() {
                  thisHeight = jQuery(this).height();
                  if(thisHeight > tallest) {
                     tallest = thisHeight;
                  }
               });
               group.height(tallest);
            }
            equalHeight(jQuery("Add your class"));


Answer 11:

我希望我能看到这篇文章之前，我（从伯爵帮助）创造了这一个

setMaxHeightForTitles($column, $title) {
      var maxHeight = 0;
      $column.find($title)
      .each(function(index, title){
        var height = $(title).height();
        if  (height > maxHeight) maxHeight = height;
      })
      .each(function(index, title){
        $(title).height(maxHeight);
      });
  }


Answer 12:

您不但可以使用每个单独的容器.parent() API。

喜欢， 

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


Answer 13:

有一个jQuery插件这个确切的目的： https://github.com/dubbs/equal-height

如果你想使所有列在同一高度，使用方法： 

$('.columns').equalHeight();

如果你想将它们按自己的榜首位置，例如。 每个容器内： 

$('.columns').equalHeight({ groupByTop: true });


Answer 14:

function setEqualHeight(columns) {
  var tallestColumn = 0;

  columns.each(function(){
    var currentHeight = $(this).height();

    if(currentHeight > tallestColumn){
      tallestColumn  = currentHeight;
    }
  });

  columns.height(tallestColumn);
}

=> setEqualHeight($('.column'));


Answer 15:

// Select and loop the container element of the elements you want to equalise
        $('.equal').each(function(){  

          // Cache the highest
          var highestBox = 0;

          // Select and loop the elements you want to equalise
          $('.col-lg-4', 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 
          $('.col-lg-4',this).height(highestBox);

        }); 

    });


Answer 16:

<div class('a')>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
</div>
<div class('b')>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
   <div class('.cols-to-eq')></div>
</div>
var a = ['.a','.b'];
a.forEach(function(value) {
    var column = 0;
    $(value).find('.cols-to-eq').each(function(){
        if($(this).height() > column){
            column = $(this).height();
        }
    });
    $(value).find('.cols-to-
    eq').attr('style','height:'+column+'px');
   });


文章来源: Setting equal heights for div's with jQuery
标签： jquery html height equals
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~