Images Align Left After Using MasonryJS With AJAX

I'm working on an Express app where I'm sending HTML data from server-side to client-side by using AJAX. Everything is working fine but the problem is with the MasonryJS layout. Al

Solution 1:

So I kind of fixed it myself. I had to load the images first by using imagesLoaded.js. Then based on this answer I used the following code inside success section of AJAX call:

$('.modal-grid').imagesLoaded(function () {
   const $grid = $('.modal-grid').masonry({
        itemSelector: '.modal-grid-item',
        gutter: 10,
        isFitWidth: true
   }); 

   $grid.one('layoutComplete', function() {
       $grid.css('opacity', '1');
   });

   $grid.trigger('layoutComplete');
});

CSS:

.modal-grid{
    opacity: 0; 
    transition: opacity; 
}