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

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

    1. Victor

      September 10, 2018 @ 12:09 am
      Reply

      Hi Darren,

      I’m new to wordpress, so I could be just missing something obvious but when I input

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

      as my shortcode at the beginning of a post none of the posts come up. However, when I only input

      [ajax_load_more post_type="post" transition="masonry"]

      it works. Do you have an idea why that might be the case? And what I could do to fix that? Thanks for the help!

      1. Darren Cooney

        September 10, 2018 @ 8:28 am
        Reply

        Hi Victor,
        Is your Ajax Load More Repeater Template set up with the .grid-item class added the the template? It sounds like Masonry cannot locate your selector.

        1. Victor

          September 10, 2018 @ 9:53 am
          Reply

          Right now I’m just using the default template:

          <li class=”no-img”>

          <a href="” title=””>

          Do you know where I’m supposed to input that in?

          1. Victor Allen

            September 10, 2018 @ 9:58 am
            Reply

            It looks like it didn’t paste correctly, I’m trying again:

            <li class=”no-img”>

            <a href="” title=””>

          2. Darren Cooney

            September 10, 2018 @ 11:18 am
            Reply

            It would go on the `li class=”no-img grid-item`, but it won’t simply work by adding this.
            Masonry will require some custom CSS styling to set the item width, height etc.

    2. DE

      April 27, 2018 @ 6:25 pm
      Reply

      Is it possible to set a columnWidth & gutter for Masonry?

      1. Darren Cooney

        May 04, 2018 @ 10:00 am
        Reply

        Not via the plugin, I’m hoping to add more features for Masonry shortly.
        For now you would need to use CSS for gutters and col width.

    3. Maksat Mambetov

      April 27, 2018 @ 9:20 am
      Reply

      Hi!
      Can you help me center blocks in frame?
      Original masonry has option fitWidth? but i can’t use this option with ajax load more?
      How can i use this option?

      1. Darren Cooney

        April 27, 2018 @ 9:57 am
        Reply

        Hi Maksat,
        Not all Masonry options are available with Ajax Load More… I plan to integrate more options soon.

    4. Levi

      January 07, 2018 @ 1:55 am
      Reply

      Hy Darren!
      Firstly thanks your work! The Ajax Load More plugin is one of the best tools what I every seen!
      But, I suffer slowly 2 hours ago, because no matter how I try, not working with the masonry the
      “grid-template-columns: repeat(auto-fill, minmax(250px,1fr)) !important;” css.

      I added this for my “.grid-item”, but not working. If I add to this item for example “width:20%;” or “width:250px;” that is working, but the grid-template-columns is not.
      My css code is here:

      .mygrid-item {
      display: grid !important; /* NOT WORKING */
      padding:0 0 0 0 !important; /* WORKING */
      grid-gap: 10px !important; /* NOT WORKING */
      grid-template-columns: repeat(auto-fill, minmax(250px,1fr)) !important; /* NOT WORKING */
      }

      If I don’t use the transition=”masonry” and masonry_selector in the shortcode, and add this css values for .alm-listing thus:
      .alm-listing {
      display: grid !important;
      padding:0 0 0 0 !important;
      grid-gap: 10px !important;
      grid-template-columns: repeat(auto-fill, minmax(250px,1fr)) !important;
      }
      here working all, but in different cases dont.

      (I think so maybe the problem is, somewhere is declared in the plugin a width value, what prevalent on the prevailing “.grid-item”, if transition=”masonry”, so if I dont give it width value in my css, it fills it, and can not take effect the auto-fill and minmax, and if I will give I our value for width, the problem is same.
      So, in this case, where can I enter to the plugin?)

      1. Darren Cooney

        January 07, 2018 @ 8:53 am
        Reply

        Hi Levi,
        I haven’t had much of a chance to look into CSS GRid yet but I believe this would be your issue.
        You don’t need to use CSS Grid layouts with masonry because it takes care of the layout for you.

        Does that make sense?

        1. Levi

          January 07, 2018 @ 5:57 pm
          Reply

          Huh, thanks Darren, this awkward, I was very tired yesterday and I really wanted to force it this minmax solution. I’ve just given it now the media screen values!
          Thanks your fast reply and have a nice day!

    5. Candice

      January 02, 2018 @ 5:44 am
      Reply

      I have the latest ALM installed and activated. The basic shortcode works but when I change it to the Masonry one, no post shown. What did I miss? do I need to copy and paste the template code? where I should paste the custom css to?

      Thanks, Candice

      1. Darren Cooney

        January 02, 2018 @ 9:19 am
        Reply

        Hi Candice,
        Some custom CSS would be required, but it sounds like a JS error not a CSS/markup issue.
        Is it possible to share a link to the issue?

        For custom CSS, it would go in your theme css file or you could use a plugin for adding custom CSS.

    6. 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 some masonry settings and figure out how I can pass them into Ajax Load More.

          Feature request noted 🙂

    7. 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?

    8. 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/

    9. 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 *