Infinite Scroll + Masonry works only sometimes, sometimes it bugs

[kenjibailly]

EDIT:

I found a vanilla JS demo that was linked somewhere here: https://codepen.io/desandro/pen/XgRpNr
I'm experiencing a bug sometimes.
I'm pretty much using the same code:

let grid = document.querySelector('.grid');

let msnry = new Masonry( grid, {
  itemSelector: 'none', // select none at first
  columnWidth: '.grid__col-sizer',
  gutter: '.grid__gutter-sizer',
  percentPosition: true,
  stagger: 30,
  // nicer reveal transition
  visibleStyle: { transform: 'translateY(0)', opacity: 1 },
  hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
});


// initial items reveal
imagesLoaded( grid, function() {
  grid.classList.remove('are-images-unloaded');
  msnry.options.itemSelector = '.grid__item';
  let items = grid.querySelectorAll('.grid__item');
  msnry.appended( items );
});


//-------------------------------------//
// init Infinte Scroll

let infScroll = new InfiniteScroll( grid, {
  path: '.older-posts',
  append: '.grid__item',
  outlayer: msnry,
  status: '.page-load-status',
});

I'm using the exact same CSS code from the codepen.
However sometimes the images are stacking on top of each other like this:

It doesn't happen every time, but enough to make it not stable enough.
I'm wondering what's going wrong, can someone help me out here?

This is the html (hbs) I'm using:

        <div class="grid are-images-unloaded">
            <div class="grid__col-sizer"></div>
            <div class="grid__gutter-sizer"></div>
            {{#foreach posts}}
                <a class="grid__item" href="{{url}}">
                    <img class="post-card-image"
                        srcset="{{img_url feature_image size="s"}} 300w,
                                {{img_url feature_image size="m"}} 600w,
                                {{img_url feature_image size="l"}} 1000w,
                                {{img_url feature_image size="xl"}} 2000w"
                        sizes="(max-width: 1000px) 400px, 800px"
                        alt="{{title}}"
                        loading="lazy"
                    />

                </a>
            {{/foreach}}
        </div>

        <div class="page-load-status">
        <div class="loader-ellips infinite-scroll-request">
            <span class="loader-ellips__dot"></span>
            <span class="loader-ellips__dot"></span>
            <span class="loader-ellips__dot"></span>
            <span class="loader-ellips__dot"></span>
        </div>
        <p class="infinite-scroll-last">End of content</p>
        <p class="infinite-scroll-error">No more pages to load</p>
        </div>

        <nav class="pagination" role="navigation">
            {{#if next}}
                <a class="older-posts" href="{{page_url next}}">Older Posts &rarr;</a>
            {{/if}}
            {{#if prev}}
                <a class="newer-posts" href="{{page_url prev}}">&larr; Newer Posts</a>
            {{/if}}
            <span class="page-number">Page {{page}} of {{pages}}</span>
        </nav>

[bakill3]

Hi,

I saw your issue with Infinite Scroll and Masonry. A couple of things to try: First, ensure imagesLoaded is really waiting for all images to load before Masonry arranges them. Adding a delay, like setTimeout, before initializing Masonry might help. After each Infinite Scroll load, it's important to call msnry.appended(items) to let Masonry know about the new items. Also, double-check your CSS against the demo. Subtle differences, especially in dimensions and positioning, can throw off the layout.