Masonry Grid Issue with Finsweet Load More in Webflow

Hi,

I’m encountering a problem with my Webflow project that utilizes a Masonry grid built with the Macy library. I’ve successfully combined content from three CMS collections using Finsweet Combine, but integrating Finsweet Load More is causing issues.

The issue manifests as:

  • Glitches when attempting to load more items
  • Items failing to load in the next section, appearing to be positioned absolutely

Unfortunately, due to a non-disclosure agreement (NDA), I cannot share a link to the project here. I’ve also tried contacting support multiple times, but the chat button isn’t functioning on my end.

Would you have any suggestions on how to resolve this load more issue?

Thanks in advance for your assistance!

Hey @hello8! I have seen your DM. I’ll answer privately and then share the solution here! :muscle:

Hey @hello8! Seems we just need to recalculate the layout when the new items are rendered.

I’ve replied your DM but posting this in case another users needs help with CMS Load and Macy.js

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      console.log('cmsload Successfully loaded!');

      const [listInstance] = listInstances;

      let macyInstance = Macy({
        container: '#masonry',
        margin: 16,
        columns: 3,
        breakAt: {
          991: 2,
          767: 2,
          479: 1,
        },
      });

      listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        macyInstance.recalculate();
      });
    },
  ]);
</script>

This code goes on the </body> section of custom code for the page where we have tehs etup.