Pour utiliser Masonry avec ImagesLoaded et la gestion du contenu dynamique (ajax), vous pouvez copier et coller les lignes de code suivante :
jQuery(document).ready(function ($) { function _pit_masonry_init(ajaxEv = false, ajaxResp = false, ajaxObj = false) { var $grid = $('.grid'); if (!$grid.length) return; var gridItemSelector = '.grid-item'; /** Init masonry */ $grid.masonry({ itemSelector: gridItemSelector, percentPosition: true, columnWidth: 100 / 3, initLayout: false, }); /** Hide grid items (images are probably not fully loaded */ var $grid_items = $grid.find(gridItemSelector); $grid_items.hide(); /** Wait for all images to load then append + refresh masonry layout */ $grid .imagesLoaded() .always(function() { /** Display images now (masonry need to see them to calculate sizes / coords...) */ $grid_items.show(); /** If we're doing it after an ajax request, append items */ var isAjax = typeof ajaxEv === 'object'; if (isAjax) { $grid.masonry('appended', $('.grid-item')); } /** Refresh masonry layout */ $grid.masonry('layout'); }); } /** Init + re-init on ajax complete */ _pit_masonry_init(); $(document).ajaxComplete(_pit_masonry_init); });