5

我之前在 Rows jQuery 脚本中使用过 Chris Coyiers Equal Height Blocks 很多次，而且效果一直很好。

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

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

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

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

我相信因为元素的“originalHeight”随着容器大小的变化而变化，脚本将不再正常工作。

我的推测可能是错误的，但一种或另一种方式不适用于流体宽度元素。寻求帮助！

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

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

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

提前致谢

4

2 回答 2

6

你只是在平衡一行上存在的列的高度，所以你可以用这个替换所有的 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包含 100 个li元素，或者当li宽度是静态的但页面宽度不是时，在调整大小时当窗口缩小时，它们会清除到新行（或者如果扩大宽度，它们会浮动回到上面的行），然后它们的高度将固定以适应每个伪行的最高值。

笔记：

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

在生产中，在 window.resize 函数中，我添加了一个 100 毫秒的 clearTimeout 和 setTimeout，然后再对大小的变化做出反应，以防止通过拖动角来调整大小时变慢。

于 2013-01-05T00:54:44.197 回答
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;   
}

小提琴

于 2013-01-05T01:23:31.490 回答