CMS Load More along with Masonry

Attributes
1

Hey @Support-Luis

I am using Load more with a masonry-type layout and just needed a bit of assistance withe the js cross-compatibility.

Here is a read more link

https://preview.webflow.com/preview/ohana-studio-staging?utm_medium=preview_link&utm_source=designer&utm_content=ohana-studio-staging&preview=2e29e1d3721c84bd8fed760aba33f39c&pageId=66fe85f849e7a9ecf4c4918e&locale=en&workflow=preview

Also the Mansory I am using,

<script src="https://cdn.jsdelivr.net/npm/macy@2.5.0/dist/macy.min.js"></script>


<script>
var macyInstance = Macy({
    container: '#masonry', //Id of the grid
    trueOrder: true, 
    margin: 25, //Gap between
    columns: 4, //Colums
    debug: true,
    mobileFirst: true,
    breakAt: {
        1200: 3,
        940: 2,
        520: 2,
        400: 1
    }
});
</script>

Currently on the load more, it just overlaps on the loading of new items. Any ideas on what I can do to sort this would be awesome, thank you. :slight_smile:

2

Hey @Ohana_Studio! You’ll need to recalculate the Macy instance on each renderitems event.

The code below should get everything working as expected :wink:


<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      const [listInstance] = listInstances;

      // Initial Macy setup
      var macyInstance = Macy({
        container: '#masonry', //Id of the grid
        trueOrder: true,
        margin: 25, //Gap between
        columns: 4, //Colums
        debug: true,
        mobileFirst: true,
        breakAt: {
          1200: 3,
          940: 2,
          520: 2,
          400: 1,
        },
      });

      // Reinitialize Macy when new items are loaded
      listInstance.on('renderitems', (renderedItems) => {
        if (macyInstance) {
          macyInstance.recalculate(true);
        }
      });
    },
  ]);
</script>
3

Hey @Support-Luis thats almost got it, It now dosen’t overlap but doesnt stack them up tight like the first set and also adds a large amount of padding?

I did a quick loom to show you the outcome :slight_smile:

thanks again for the help!

4

Oops! Small oversight on my end. We need to recalculate after the images are loaded.

Can you test this snippet?

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      const [listInstance] = listInstances;

      // Initial Macy setup
      var macyInstance = Macy({
        container: '#masonry', //Id of the grid
        trueOrder: true,
        margin: 25, //Gap between
        columns: 4, //Colums
        debug: true,
        mobileFirst: true,
        breakAt: {
          1200: 3,
          940: 2,
          520: 2,
          400: 1,
        },
      });

      // Reinitialize Macy when new items are loaded
      listInstance.on('renderitems', (renderedItems) => {
        macyInstance.runOnImageLoad(function () {
          macyInstance.recalculate(true);
        }, true);
      });
    },
  ]);
</script>
5

You are a Legend! Thats got it. Thank you.
I will drop this in my github repo for future use also, thank you.

1 Like