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
-
Ajax Load More 7.0
Refactoring Ajax Load More for the future.
-
Tracking Pageviews with Google Analytics 4
Measuring page views automatically with GA4 and Ajax Load More.
-
Ajax Load More 5.6
A release focused on new features, facet filtering and extending existing functionality.
-
Instant Images Adds Openverse API Integration
Instant Images now offers API integrations with Unsplash, Openverse, Pixabay and Pexels, providing access to millions of high-quality images...
The following CSS is used to layout the .grid-item elements within Masonry.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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; } } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |