动态加载的砌体图像重叠

Question

我使用jQuery插件Masonry在我的网站上加载图片，但大部分时间都是重叠的。我发现这是插件的一个流行问题，并尝试了各种解决方案，但仍然没有得到它正常工作。这是我到目前为止所做的。

HTML

<div id="container" class="js-masonry" data-masonry-options='{ "itemSelector": ".item" }'>
  {% for article in blog.articles %}
    <div class="blog-article{% if forloop.first %} first{% endif %}{% if forloop.last %} last{% endif %} item">
      <a href="{{ article.url }}">{{ article.content }}</a>
    </div>
  {% endfor %}
</div>

JS

$(window).load(function(){
  var $container = $('#container');            
  $container.imagesLoaded(function(){                 
    $container.masonry({
       itemSelector: '.item',
       isAnimated: true,                  
    });
  });
});

CSS

#container {
  position: relative;
}

.item {
   margin: 10px;
   width: 25%; 
}

修改

Answer 1

用上面的方法替换上面的jQuery解决了这个问题：

$(window).load(function(){
  var $container = $('#container').masonry();
  // layout Masonry again after all images have loaded
  $container.imagesLoaded( function() {
    $container.masonry();
  });
});

Answer 2

尝试重用 LazyLoad

的“ 已加载回调”中的“ 砌体”

var ll = new LazyLoad({
    elements_selector: "img[data-src]",
    callback_loaded() {
        masonry = new Masonry(grid, {
            itemSelector: '.img-selector',
        });
    }
});

更多添加的代码在下面

callback_loaded() {
    masonry = new Masonry(grid, {
        itemSelector: '.img-selector',
    });
}

相同的代码已经在这里：https://stackoverflow.com/a/57770508/1206759