Masonry items overlap

[sharifzadesina]

It some times fails like this: But it always should be like this:

My script:

window.imagesLoaded = require('imagesloaded');
window.Masonry = require('masonry-layout');
window.InfiniteScroll = require('infinite-scroll');

InfiniteScroll.imagesLoaded = imagesLoaded;

var msnry = new Masonry('.posts-grid', {
    itemSelector: '.posts-grid-item',
    originLeft: false
});
var infScroll = new InfiniteScroll('.posts-grid', {
    path: '.pagination__next',
    hideNav: '.pagination',
    append: '.posts-grid-item',
    status: '.posts-scroller-status',
    history: false,
    outlayer: msnry,
    elementScroll: 'main'
});

[sharifzadesina]

It seems this is cause of a bug in imagesloaded package or infinite-scroll. I've fixed it by this code:

infScroll.on('append', function(response, path, items) {
    imagesLoaded('.posts-grid', function() {
        msnry.layout();
    });
});

[StErMi]

It's happening also to me but I'm not using imagesloaded nor infinite-scroll

[desandro]

@StErMi You likely need to use imagesLoaded. See https://masonry.desandro.com/faq.html#how-do-i-fix-overlapping-item-elements