title: Images align left after using MasonryJS with AJAX
body: <p>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).</p>
  <p>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.</p>
  <p>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.</p>
  <p>Here's a screenshot:</p>
  <p><a href="https://i.stack.imgur.com/i5vqs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i5vqs.jpg" alt="enter image description here" /></a></p>
  <p>Here's the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(modalForm).submit((e) =&gt; {
      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
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.5.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"&gt;&lt;/script&gt;
      
  &lt;div class="modal"&gt;
      &lt;div class="modal-content"&gt;
           &lt;div class="modal-header"&gt;
                &lt;div class="modal-image-results-container"&gt;
                     &lt;div class="loader-container hidden"&gt;
                          &lt;img src="images/loader2.gif" /&gt;
                     &lt;/div&gt;
              
                      &lt;div class="error-container hidden"&gt;
                           &lt;p&gt;Something went wrong. Please try again!&lt;/p&gt;
                      &lt;/div&gt;
              
                      &lt;div class="data-container"&gt;
                           &lt;div class="modal-grid"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                &lt;/div&gt;
          &lt;/div&gt;   
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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).</p>