JQuery:Equal Heights无效

时间:2016-08-29 22:52:39

标签: javascript jquery html css

我正试图平衡div中某些内容的高度。当我加载页面时,它看起来像这样:

Setting all heights to the FIRST (and smallest) element

我在控制台中输出了这个输出:

Content loop no.0
177
Content loop no.1
177
Content loop no.2
177
DONE

在上面的输出im中记录每个元素循环时的高度。但是,第二个和第三个元素是203px高,而不是177.当我调整浏览器窗口大小时,它会自行更正,并且所有元素都按预期工作。当我设置断点并逐步执行代码时,它按预期工作。这似乎只有在我刷新浏览器时才会发生???

如果列不是全宽,我只是想均衡高度。

这是我的代码:

var c,
    Cards = {
        //Settings
        settings: {
            row: $('.row'),
            card: $('.card')
        },

        //Initialising Function
        init: function() {
            c = this.settings;
            this.resizeCard();
        },

        resize: function() {
            c = this.settings;
            this.resizeCard();
        },

        resizeCard: function() {

            // Reset height
            $('.card-content').css('height','');

            // Iterate through each "Row" element
            c.row.each(function(i) {

                var rowWidth = c.row.width(),
                    columns = $(this).find('.grid-column'),
                    cards = $(this).find('.card'),
                    contentHeight = 0;

                // If there's more than one card in this row...
                if(cards.length > 1) {
                    // Iterate through each column, check the width
                    columns.each(function() {
                        if(rowWidth > $(this).outerWidth()) {// If the card is in a row of cards
                            $(this).find('.card').addClass('equal-height'); // Add the equal height class
                        }
                    });
                }

                // Iterate through each content div under "Equal Height" cards
                $(this).find('.equal-height .card-content').each(function(i) {
                    console.log("Content loop no." + i)

                    if($(this).height() > contentHeight) {
                        contentHeight = $(this).height();
                    }

                    console.log(contentHeight)
                })

                // Set the final height of the content
                if(contentHeight > 0) {
                    console.log("DONE");
                    $(this).find('.equal-height .card-content').css('height',contentHeight);
                }


            });
        }
    }

0 个答案:

没有答案