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

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

    1. Avatar

      Ahmad

      April 11, 2020 @ 4:42 am
      Reply

      i have bought a theme from adforest and i want to use ajax load more on my classified ads , plugin works , but it load ads in listing style , i want that to be in a grid , ads should be loaded in grid as it was before loading… what should i do ?

      1. Avatar

        Darren Cooney

        April 11, 2020 @ 10:48 am
        Reply

        Hi Ahmad,
        The idea with Ajax Load More is you build a template that matches your theme using Repeater Templates – https://connekthq.com/plugins/ajax-load-more/docs/repeater-templates/

        Here is the Implementation Guide as well.
        https://connekthq.com/plugins/ajax-load-more/docs/implementation-guide/

        Please open an official support ticket under the “support” tab on the site if you require additional assistance.

      2. Avatar

        Ahmad

        April 11, 2020 @ 5:09 pm
        Reply

        i have already checked that documentation , i cant seem to find any solution of my problem through this documentation .. how can i display a grid using a repeater template ? i’m a newbie .

    2. Avatar

      Rashad Landrum

      June 20, 2019 @ 3:59 pm
      Reply

      I have a custom theme that I made and when I use the plug in, the load more button does not show and the images don’t pop up. I followed the masonry and setup docs but it still does not work for my site, any possible fix?

      1. Avatar

        Darren Cooney

        June 21, 2019 @ 2:49 pm
        Reply

        Hi Rashad,
        I would need to see a link to be able to help. Can you share one?

        1. Avatar

          Rashad Landrum

          June 24, 2019 @ 4:37 pm
          Reply

          yeah sure, I just included it now. The part that says past exhibitions is where I want the plugin to work

          1. Avatar

            Darren Cooney

            June 25, 2019 @ 10:09 am
            Reply

            Hi Rashad,
            Im unable to test it as your site never completes loading so ALM is not able to start.

            1. Avatar

              Rashad Landrum

              June 25, 2019 @ 2:03 pm

              sorry about that, it should be good now

    3. Avatar

      Mocha

      May 16, 2019 @ 1:35 am
      Reply

      Hello!
      I would like to know if it is possible to combine masonry infinite scroll with search.php?
      I’ve added the .grid-item.css to my style.css and the following code into search.php:

      The actual button and search function works, but it’s not showing any of the posts. (https://imgur.com/0sC2rHE)

      I am fairly new to WordPress and web dev so it could be something obvious that I missed.

      1. Avatar

        Mocha

        May 16, 2019 @ 1:37 am
        Reply

        Apologizes made a mistake on my previous post. This was the code I inputted into search.php:

        $term = $_GET[‘s’];
        if(empty($term)){
        $term = ‘WordPress’;
        }
        echo do_shortcode(‘[ajax_load_more post_type="post, page, portfolio" search="'. $term .'" orderby="relevance" posts_per_page="2" post_format="standard" transition="masonry" masonry_selector=".grid-item" progress_bar="true" progress_bar_color="ed7070" button_label="Scroll to load more!" button_loading_label="Kino is searching!"]‘);

      2. Avatar

        Darren Cooney

        May 16, 2019 @ 9:29 am
        Reply

        Hi Mocha,
        By looking at that video, I think you might have an issue in your Repeater Template.
        Can you open a support ticket and share a link to your site?
        https://connekthq.com/plugins/ajax-load-more/support/

        Cheers,

    4. Avatar

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

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

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

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

            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.

    5. Avatar

      DE

      April 27, 2018 @ 6:25 pm
      Reply

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

      1. Avatar

        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.

    6. Avatar

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

        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.

    7. Avatar

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

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

          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!

    8. Avatar

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

        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.

    9. Avatar

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

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

          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 🙂

    10. Avatar

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

        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?

    11. Avatar

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

        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/

    12. Avatar

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

        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 *