流體寬度元素的等高行

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

小提琴