jquery - 流体宽度元素的等高行

Question

我用过 Chris Coyiers Equal Height Blocks in Rows之前多次使用 jQuery 脚本，并且一直运行良好。

话虽这么说，但我一直在开发针对特定分辨率构建的网站。这一次，我正在开发一个响应式网站，主容器的宽度是可变的。因此，我遇到了一个问题，但找不到解决我的问题的方法。

Chris 在他的帖子中谈到了流体宽度:

What About Fluid Width? One of the main points of not using a table for this is that floated divs can rearrange themselves based on the available horizontal space, which is nice for fluid width. We can adjust the above code to deal with that as well. Basically the first time this is run we'll measure the height of each block and remember it with jQuery's data() method. Then when the window is resized, run the code again but use the original size to adjust the rows, not the new size.

请注意，他具体指的是流宽容器。在我的例子中，不仅仅是容器，子元素也具有可变宽度。我需要均衡的 block 是具有流动宽度并根据窗口/容器的分辨率进行调整的相同 block 。

我认为由于元素的“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');
});

这甚至会处理许多属于同一父级的子级的元素，即使它们断行，例如一个包含 100 个 li 元素的 ul 当只有 10 个适合一行时，或者当 li 宽度是静态的但页面宽度不是时，调整大小它们会在窗口缩小时清除到新行上(或者如果扩大宽度则 float 回到上面的行)然后它们的高度将固定以适应每个伪行的最高值。

注意事项:

反馈表明 outerHeight() 在某些情况下比 .height() 工作得更好。

在生产中，在 window.resize 函数中，我在对大小变化使用react之前添加了 100 毫秒的 clearTimeout 和 setTimeout，以防止通过拖动 Angular 调整大小时速度变慢。