javascriptjquerycssajaxjquery-masonry

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. All the images align to the left one after the other on a long column (not overlapping).

Please note that I'm using a modal with a fixed height of 100vh. And only the images container have the overflow-y set to auto.

Also note that the code I'm using right now, I tested those with static image data. It worked fine. But now that I'm using AJAX to get data from the server-side, it breaks the layout.

Here's a screenshot:

enter image description here

Here's the code:

$(modalForm).submit((e) => {
    e.preventDefault();

    const actionUrl = $(e.target).attr("action");
    const formInput = $(".modal-image-searchbar input[type=text]");
    const input     = formInput.val();

    $.ajax({
        type: "POST",
        url: actionUrl,
        dataType: "json",
        data: {
            input: input
        },
        beforeSend: function() {
            $('.error-container').addClass("hidden");
            $('.loader-container').removeClass("hidden");
            $(".data-container").addClass("hidden");
        },
        success: function( data ) {

            if ( data.html ) {

                $(".data-container").removeClass("hidden");
                $('.error-container').addClass("hidden");
                $('.loader-container').addClass("hidden");

                $(".data-container .modal-grid").html(data.html);
                $('.data-container').css('overflow-y', 'auto');

            } else if (data.error) {

                $(".data-container").addClass("hidden");
                $(".loader-container").addClass("hidden");
                $(".error-container").removeClass("hidden");

                $(".error-container").html(data.error)
            }
        },
        complete: function() {
            $(".loader-container").addClass("hidden");
        },
    })
});




// Masonry Initialize
$('.modal-grid').masonry({
        itemSelector: '.modal-grid-item',
        gutter: 10,
        isFitWidth: true
});
.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
}

.modal .modal-content {
    background-color: #fefefe;
    margin: 20px auto;
    padding: 40px 80px;
    border: 1px solid #888;
    width: 83%;
    height: calc(100vh - 40px);
}

.data-container{
    height: 382px;
}
  
.modal-header{
    display: flex;
    justify-content: space-between;
}


.modal-grid-item { width: 300px; margin-bottom: 10px; }
.modal-grid-item img { width: 100%; height: auto; }
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    
<div class="modal">
    <div class="modal-content">
         <div class="modal-header">
              <div class="modal-image-results-container">
                   <div class="loader-container hidden">
                        <img src="images/loader2.gif" />
                   </div>
            
                    <div class="error-container hidden">
                         <p>Something went wrong. Please try again!</p>
                    </div>
            
                    <div class="data-container">
                         <div class="modal-grid"></div>
                    </div>
              </div>
        </div>   
    </div>
</div>

How can I make MasonryJS work with AJAX? I have tried the existing solution here in SO but some have the same result as I have right now and some just overlap the images (even though they are in a grid layout).

Solution

  • 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; 
}