Example on how to use Masonry.js with FacetWP

main.js

// Init Masonry
var $grid = jQuery('.facetwp-template').masonry({
    percentPosition: true,
    columnWidth: '.grid-sizer',
    itemSelector: '.grid-item'
});

// Reload and update on FacetWP load
jQuery(document).on('facetwp-loaded', function() {
   $grid.masonry('reloadItems') 

    // Update Masonry layout after each image loads
    $grid.imagesLoaded().progress( function() {
      $grid.masonry('layout');
    });    
});