等高行

Question

我試圖使用fitHeights（http://codepen.io/davatron5000/pen/fIqnF）來平衡列的行數，但我無法讓它分別計算每行的高度。有沒有人有關於如何修改計算每行最高容器的想法？

這是我正在使用的示例。 http://codepen.io/FernE97/pen/rzfid。現在它正在計算高度，但它是從最高的4個而不是每排中最高的。

(function ($) { 
    'use strict'; 

    $.fn.fitHeights = function() { 

     var items = $(this); 

     function setHeights() { 
      var currentTallest = 0; 

      items.css({ 'min-height' : currentTallest }); // unset min-height to get actual new height 

      items.each(function() { 
       if ($(this).outerHeight() > currentTallest) { currentTallest = $(this).outerHeight(); } 
      }); 

      items.css({ 'min-height' : currentTallest }); 
     } 

     setHeights(); 
     $(window).on('resize', setHeights); 
     return this; 
    }; 

}(jQuery)); 

// on load 
jQuery(window).load(function ($) { 

    $('.fitheights .module').fitHeights(); 

}(jQuery)); 

Answer 1

希望這可以幫助，但檢查出更新的codepen我做了 - 基本上我創建了一個sameHeights功能，並把高處的圖像希望這會幫助你 http://codepen.io/anon/pen/fslvc

的JS

$.fn.sameHeights = function() { 
    $(this).each(function(){ 
     var tallest = 0; 
     $(this).children().each(function(i){ 
      if (tallest < $(this).height()) { tallest = $(this).height(); } 
     }); 
     $(this).children().css({'height': tallest}); 
    }); 
    return this; 
}; 

$(window).load(function(){ 
/* $(groupOfItems).fitHeights(); */ 
$('ul').sameHeights(); 
}); 

CSS

img { max-width: 100%; height:300px; }