One of the most common Ajax Load More support request is users seeking technical assistance getting Masonry and Ajax Load More working together to create infinite scrolling flexible layouts.

In the past, this task required some custom JavaScript and use of the almComplete callback function – this solution worked in most cases, however issues would undoubtedly arise as every users site structure is slightly different.

So with that said, I’m happy to report that in version 3.1 of Ajax Load More, support for Masonry has been integrated directly into the plugin and can be initiated by simply referencing a couple of Masonry parameters in your shortcode.

Getting Started

To get started infinite scrolling with Masonry you’ll first need to install and activate Ajax Load More – it’s free and installed from the wordpress.org plugin repository.

I won’t get into the nitty gritty of how to get up and running with Ajax Load More in this tutorial, if you need help with this step there is a post already written that provides guidance on this topic.

Now, assuming you’re familiar with the way the Ajax Load More works and functions, all you’ll need to do is set transition=”masonry” and define a masonry_selector in your shortcode. Check out the shortcode example below as a reference.

Example Shortcode[ajax_load_more post_type="post" transition="masonry" masonry_selector=".grid-item"]

Note: masonry_selector is the itemSelector value that is passed into Masonry and is required.

With the above shortcode parameters active, Ajax Load More will enqueue the Masonry and ImagesLoaded JavaScript libraries from WordPress core and route Ajax results through a custom JavaScript function for display in a Masonry layout.

And that’s it – aside from some CSS tweaks that may be required, setting those two shortcode parameters will enable direct integration of Masonry with Ajax Load More.

Custom CSS

Some CSS will be required to align grid items into multiple columns and this is not provided out of the box with Ajax Load More or Masonry – using the masonry_selector as a CSS selector we can adjust the width the items to fit into columns.

The CSS snippet below displays .grid-item elements in two columns on large screens and then condenses the elements to a single column for small screens.

Note: CSS is unique to everyone’s theme, the code sample above is just a snippet to get you started.

The Results

Click the ‘Load More‘ button below to see the final results of using the integrated Masonry functionality for Ajax Load More – it really can’t get much quicker or easier to implement 🙂

    Wrapping Things Up

    Adding support for infinite scrolling and lazy loading with Masonry is painless with Ajax Load More. No custom JavaScript required, just set up your shortcode, add some CSS and assign those two shortcode parameters and you are ready to go – view example.

    Got any questions? Leave them in the comments and I’ll do my best to help you out!

    Comments

    9 thoughts on “How to Infinite Scroll with Masonry and Ajax Load More”

    1. Itay Banner

      July 20, 2017 @ 4:33 am
      Reply

      Can I pass other masonry options through the ALM shortcode?

      Specifically I’d like to be able to set “originLeft: false” on RTL pages

      https://masonry.desandro.com/options.html#originleft

      1. Itay Banner

        July 20, 2017 @ 4:35 am
        Reply

        Sorry, I posted too quickly. Reading your reply to the previous comment, I deduct that the answer is also “no”. Well then let’s consider this a feature request! 🙂

        1. Darren Cooney

          July 20, 2017 @ 8:10 am
          Reply

          Hi Itay,
          No worries!
          I need to start testing masonry some masonry settings and figure out how I can pass them into Ajax Load More.

          Feature request noted 🙂

    2. James Godwin

      July 16, 2017 @ 3:03 pm
      Reply

      Is it possible to to integrate with isotope filtering? I’ve tried adding Isotope filtering myself but it makes the layout break.

      1. Darren Cooney

        July 20, 2017 @ 8:09 am
        Reply

        Hi James,
        I haven’t tried with isotope, but my guess is no since ALM wouldn’t know which filtered posts to load.

        Can you explain how your layout breaks a bit more?

    3. Antonio Carreira

      June 20, 2017 @ 1:46 pm
      Reply

      Hi there. First of all thanks for this amazing plugin!

      I was able to setup ALM with a Masonry Layout. The problem is that some items are hanging on the right side at the end of the list.
      In the Masonry JS library there’s an option to prevent that:
      horizontalOrder: true
      Is it possible to use that option in the shortcode or on a filter?

      Thanks in advance!

      1. Darren Cooney

        June 20, 2017 @ 4:44 pm
        Reply

        Hi Antonio,
        That’s not possible at this time with the built in Masonry.

        is there anyway you could share a link to the issue? Maybe there is another fix.
        You could always open a support ticket here if you don’t want to post the link.
        https://connekthq.com/plugins/ajax-load-more/support/

    4. David French

      June 09, 2017 @ 5:07 pm
      Reply

      I see the native support for Masonry in Ajax Load More article, but it seems to be querying posts. I’ve already built a custom query loop for a ACF repeater custom field, but as these are a custom field type not a custom post type, I don’t see how I’m supposed to connect the two. Is Load More only good for Ajax loading posts or can it also be used for images?

      1. Darren Cooney

        June 09, 2017 @ 5:23 pm
        Reply

        Hey David,
        That requires the ACF extension.
        https://connekthq.com/plugins/ajax-load-more/extensions/advanced-custom-fields/

        Hope that helps!

    Leave a Reply

    Your email address will not be published. Required fields are marked *