Masonry

Ajax Load More offers built-in support for rendering Masonry layouts with infinite scroll, however, not all Masonry options are available via the shortcode parameters.

Modifying Options

To offer users full control over Masonry settings and options, we’ve added functionality that allows for the passing of custom Masonry options directly to Ajax Load More via JavaScript variables.

To create or override Masonry options, you simply add an alm_masonry_vars JavaScript variable directly to the page template where Masonry is active.

Within the alm_masonry_vars variable, you need to specify the key-value pairs you wish to modify (as seen below).

// templates/masonry.php
<script>
   // Override gutter, columnWidth and itemSelector.
   var alm_masonry_vars = {
      gutter : 0,
      columnWidth : 200,
      itemSelector : '.grid_item'
      stagger: 30
   }
</script>
<?php echo do_shortcode( '[ajax_load_more post_type="post" transition="masonry" masonry_animation="zoom-out" masonry_selector=".item"]' ); 

The code sample above adds gutter and columnWidth options, while the itemSelector parameter modifies the value of the masonry_selector shortcode parameter set in the Ajax Load More shortcode.