Still seeing overlap issues after a random number of page transitions each time

[troycono]

In reference to this ticket: https://github.com/desandro/masonry/issues/882

I'm having the same issue, however, using imagesLoaded in conjunction with 'reloadItems' still isn't preventing this issue for me.

I have the following code in my js:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data )  {
    // Masonry Posts
    jQuery('#resources-index').imagesLoaded( function() {
        jQuery('#resources-index').masonry('reloadItems').masonry({
            itemSelector: 'article'
        });
    });
});

And this works for the first 3 to 4 pages each time, however, at some point after that (not necessarily the same number of paginations after either), a page's elements are added to the masonry container, but aren't offset top, and overlap the first several elements there within, while the overall height of the container increases correctly, and accordingly.

I have tried a setTimeout function on this as well, to see if it just needed a few seconds (literally tried it with 2000 millisecond delay), but that didn't work either.

I tried your exact code from the referenced issue:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
    jQuery('#resources-index').masonry('reloadItems').masonry();
    jQuery('#resources-index').imagesLoaded( function() {
      jQuery('#resources-index').masonry();
    });
});

That yielded no different results either.

Any suggestions on what else to try?