Dynamically loaded Masonry images are overlapping

Question

I'm using the jQuery plugin Masonry to load images on my site, but the majority of the time a lot of them are overlapping. I have found this to be a popular problem with the plugin and have tried various solutions, but still haven't gotten it working properly. This is what I have so far.

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%; 
}

EDIT Overlapping images

The images are overlapping. Added an image above to illustrate the problem. — Eric Filkins, May 20 '14 at 21:01

score 2 · Accepted Answer · answered May 20 '14 at 21:52

Replacing the jQuery above with this fixed the problem:

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

score 0 · Answer 2 · answered Sep 03 '19 at 11:14

Try to re-use "Masonry" in the "callback_loaded" of the LazyLoad

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

Further added code is below

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

Same code is already here: https://stackoverflow.com/a/57770508/1206759

Dynamically loaded Masonry images are overlapping

2 Answers2