Столбцы равных высот в строках

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