等高的列成行

Equal height columns in rows

本文关键字：更新时间：2023-09-26

我试图使用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));

希望这对您有所帮助，但请查看我所做的更新代码-基本上我创建了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; }

没有找到相关文章