带有lazyloading的Masonry jquery插件

Question

当将砖石与lazysize一起使用时，lazysize会加载图像，这意味着它会动态地将图像添加到网格中，所有添加的不在视口中的图像都不适合网格。它们堆叠在一起。所以我给lazyload添加了一个类：

.lazyloading {
opacity: 0;
min-height: 350px;

但这并不能解决问题，因为图像有不同的高度，它们重叠或有太多的余量。当我调整整个窗口的大小时，即使只有1px，图像也会完美地重新排列。我也尝试过使用imagesLoaded，但没有帮助。

测试用例：https://codepen.io/anon/pen/EpmpaN

Answer 1

这暂时解决了我的问题。滚动时重新激活砖石：

var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
percentPosition: true,
columnWidth: '.grid-sizer'
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});  
// scroll event to fire masonry
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 300){
$grid.masonry('layout');
}
});
});