流体宽度元素的等高行

Question

我以前曾多次使用过Chris jQuery脚本中的Chris Coyiers Equal Height Blocks ，而且它总是很棒。

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

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

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

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

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

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

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

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

$(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

})

但是如果你想按伪行工作演示来做

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

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

笔记：

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

在生产中，在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;   
}

小提琴