Question

之前我曾经多次使用Chris Coyiers Equal Height Blocks in Rows jQuery脚本，而且它总是很棒。

话虽如此，我一直在开发针对特定分辨率而构建的网站。这次我正在开发一个响应式网站，主容器有一个流畅的宽度。因此，我遇到了一个问题，无法找到解决问题的方法。

在他的帖子中，克里斯说这是关于流体宽度：

流体宽度怎么样？不使用表格的一个要点是浮动的div可以根据可用的水平空间重新排列，这对于流体宽度很好。我们也可以调整上面的代码来处理它。基本上第一次运行时，我们将测量每个块的高度，并使用jQuery的data（）方法记住它。然后，在调整窗口大小时，再次运行代码，但使用原始大小来调整行，而不是新大小。

请注意，他专门引用了一个流体宽度的容器。在我的例子中，它不仅仅是容器，还有具有流体宽度的子元素。我需要均衡的块是相同的块具有流体宽度并调整到窗口/容器的分辨率。

我相信因为元素'originalHeight'随容器大小而变化，脚本将无法再正常工作。

我的推测可能是错误的，但不管怎样，这与流体宽度元素无关。寻求帮助！

当然，这是我创建的jsfiddle来证明问题。只需调整窗口的宽度，您就会注意到容器的高度不会更新。

我正在运行以下代码来调用窗口调整大小事件的函数：

$(window).resize(function() {
    columnConform();
});

提前致谢

Answer 1

你只是平衡一行中存在的列的高度，所以你可以用这个替换所有JS

$.fn.extend({
    equalHeights: function(options){
      var ah=(Math.max.apply(null, $(this).map(function(){ return $(this).height(); }).get()));
      if (typeof ah=='number') $(this).height(ah);
    }
 });

并执行如此

$(document).ready(function() {
    $(window).resize(function() {
        $('.equalize').equalHeights();
    }).trigger('resize'); // don't write code twice just to execute on page load - trigger the event you just bound to instead

})

但是如果你想按伪行working demo

进行

<ul class="eqme">
  <li><h1>One</h1></li>
  <li><h2>Two</h2></li>
  ....
</ul>

JS

$.fn.extend({
equalHeights: function(){
    var top=0;
    var classname=('equalHeights'+Math.random()).replace('.','');
    $(this).each(function(){
      if ($(this).is(':visible')){
        var thistop=$(this).offset().top;
        if (thistop>top) {
            $('.'+classname).removeClass(classname); 
            top=thistop;
        }
        $(this).addClass(classname);
        $(this).height('auto');
        var h=(Math.max.apply(null, $('.'+classname).map(function(){ return $(this).outerHeight(); }).get()));
        $('.'+classname).height(h);
      }
    }).removeClass(classname); 
}       

});

$(function(){
  $(window).resize(function(){
    $('.eqme li').equalHeights();
  }).trigger('resize');
});

这甚至会照顾许多同一父母的孩子，即使他们打破了行，例如一个ul包含100个li元素，当只有10个适合一行时，或li宽度是静态但页面宽度不是时，调整大小时它们会清除到新行上窗口缩小（或者如果扩展宽度则浮回到上面的窗口），然后它们的高度将固定以适应每个伪行的最高。

备注：

反馈表明outerHeight()在某些情况下比.height()效果更好。

在生产中，在window.resize函数中，我添加了一个clearTimeout和setTimeout为100ms，然后对大小的变化作出反应，以防止在通过拖动角落调整大小时减速。

Answer 2

假设我理解了你的问题，这段代码应该有效：

$(document).ready(function() {

    $(window).on('resize', function() {
        $('.equalize').css('height', highest($('p')));
    }).trigger('resize');

});

function highest(el) {
    var highest = 0;
    el.each(function() {
        var height = $(this).height();
        if(height > highest) {
          highest = height;
        }
    });
    return highest;   
}

Fiddle

流体宽度元素的等高行

2 个答案: