In this example:
Ajax Load More and Masonry combine to create an infinite scrolling flexible grid layout.

Masonry is a popular JS plugin used to place elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

🔥  Ajax Load More 4.1+ added support for modifying Masonry options → view docs

The following CSS is used to layout the .grid-item elements within Masonry.


The following shortcode was used to create the Masonry example.

[ajax_load_more repeater="template_8" post_type="post" posts_per_page="4" label="Load More" transition="masonry" masonry_selector=".grid-item" masonry_animation="slide-up"]


The following Repeater Template was used to create the Masonry example.