Utiliser Masonry avec ImagesLoaded + gestion du contenu dynamique (ajax)

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);

});