我在grid
类中使用了砌体布局,而grid-items
则是列。我在加载事件上加载砌体,如下所示
$(window).load(function () {
$('.grid').masonry({
// options
itemSelector: '.grid-item',
horizontalOrder: true,
isAnimated: true,
animationOptions: {
duration: 1000,
easing: 'linear',
queue: false
}
});
});
我的HTML在下面,我正在通过ajax加载项目。有时它负载正确,有时会重叠我的页脚内容或div。如下面的截图所示。
<div class="grid">
<div class="grid-item">
<img src="images/grid1.jpg" alt="Banner"></a>
</div>
</div>
在图像满载之前,砌体正在射击。您可以使用imagesLoaded(正在页面上加载)确定图像何时加载到容器中。然后解雇砌体。就像是:
var $container = $('#masonry-grid');
$container.imagesLoaded(function(){
runMasonry();
});
我刚刚发现了一个替代修复:我创建了一个具有正确尺寸的canvas元素,而不是仅加载和放置图像。这个»canvas«用作比率计算的占位符。图像位于绝对顶部位置。
警告:你需要知道图像大小/比例。在我的wordpress案例中,它们嵌入在json调用中。
它甚至可以在Internet Explorer 11中使用。
解决这个问题的原因只是将元素附加到setTimeout
函数中。
$.ajax({
url: ajaxURL,
type: 'post',
data: {
page: page,
action: 'load_more'
},
success: function(response) {
let el = $(response)
that.data('page', newPage);
setTimeout(function() {
$('#masonry').append(el).masonry('appended', el, true);
}, 1000);
},
error: function(response) {
console.log(response);
}
});