我正试图平衡div中某些内容的高度。当我加载页面时,它看起来像这样:
我在控制台中输出了这个输出:
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);
}
});
}
}