流体宽度元素的等高行

Question

流体宽度元素的等高行

5

我以前多次使用Chris Coyiers的Equal Height Blocks in Rows jQuery脚本，效果一直很好。但是，我之前开发的网站都是为特定分辨率而建立的。这次我正在开发一个响应式网站，主容器具有流体宽度。因此，我遇到了一个问题，无法解决。

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

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

请注意，他特别提到了流体宽度容器。在我的情况下，不仅是容器，子元素也具有流体宽度。我需要使相同的块等高的块也具有流体宽度，并调整到窗口/容器的分辨率。

我认为由于元素的“originalHeight”随容器大小而改变，脚本将无法正常工作。

我的猜测可能是错误的，但以某种方式，这不适用于流体宽度元素。正在寻求帮助！

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

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

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

提前致谢

- norsewulf

1

这是我现在构建每个站点中都遇到的常见问题。我无法相信截至2014年还没有就此达成一致。对@Popnoodles的回答感到兴奋！http://codepen.io/sheriffderek/pen/nJwqH/ - sheriffderek

从@Popnoodles的答案https://dev59.com/DGzXa4cB1Zd3GeqPYNQl#14167351中，我删除了JS中的行位，以使所有列具有相等的高度。http://jsfiddle.net/JYnCb/81/ 我使用http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/来限制调整大小。 - lowtechsun

@lowtechsun 这就是我回答中第一个（小）代码块所做的事情。你的代码太多了，超出了你的需求。这里是链接：http://jsfiddle.net/JYnCb/82/ - Popnoodles

2个回答

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

- JimmyRare

非常抱歉，我的互联网出了问题，所以我没有看到有答案发布。 - JimmyRare

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Popnoodles · Accepted Answer

你只需将同一行中存在的列的高度进行平衡即可，因此你可以使用以下代码替换所有的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');
});

这将甚至处理许多元素，它们是相同父级的子元素，即使它们破行，例如包含100个li元素的ul，在一行上只能容纳10个元素，或者当li宽度为静态时，但页面宽度不是，当调整大小时，它们将清除到新行（如果缩小窗口，则会向上浮动到上面一个），然后它们的高度将根据伪行的最高高度进行调整。

注意：反馈表明，在某些情况下，outerHeight()比.height()更好。

在生产中，在window.resize函数内，我添加了一个clearTimeout和setTimeout 100ms，以防止通过拖动角来调整大小时减慢速度。