流体宽度元素的等高行

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 ul个li元素适合一行时包含100个元素,或者当li宽度是静态但页面宽度不是时,调整大小当窗口缩小时它们将清除到新的线条上(或者如果扩展宽度则浮回到上面的那条线条)然后它们的高度将固定以适应每个伪行的最高.

笔记:

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

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