One of the most common Ajax Load More support requests 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 the use of the almComplete callback function – this solution worked in most cases, however, issues would undoubtedly arise as every user’s 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 of 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.
.ajax-load-more-wrap ul.alm-listing li.grid-item{
border: 1px solid #efefef;
width: 47%;
margin: 0 1.5% 3%;
float: left;
display: inline;
}
@media screen and (max-width: 480px){
.ajax-load-more-wrap ul.alm-listing li.grid-item{
width: 100%;
margin: 0 0 20px;
}
}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 is required, just set up your shortcode, add some CSS, and assign those two shortcode parameters and you are ready to go – view example.
Got questions? Leave them in the comments and I’ll do my best to help you out!