0

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));
4

1 に答える 1

0

これが役立つことを願っていますが、私が行った更新されたコードペンをチェックしてください-基本的には、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; }
于 2013-03-27T19:57:24.977 に答える