Masonry

Infinite scroll a flexible grid with Masonry and Ajax Load More

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.

.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;
	}
}
CSS
<li class="grid-item"> 
   <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
      <?php the_post_thumbnail('alm-cta'); ?>
   </a>
   <h3>
      <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
         <?php the_title(); ?>
      </a>
   </h3>
   <p class="entry-meta"><?php the_time("F d, Y"); ?></p>
   <?php the_excerpt(); ?>
   <div class="launch">
      <a href="<?php the_permalink(); ?>">View Details</a>
   </div> 
</li>
PHP

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.