使用带有 AJAX 的 MasonryJS 后图像左对齐

Question

我正在开发一个 Express 应用程序，我使用 AJAX 从服务器端向客户端发送 HTML 数据。一切正常，但问题出在 MasonryJS 布局上。所有图像在一长列上一个接一个地向左对齐（不重叠）。

请注意，我使用的是固定高度为 100vh 的模式。并且只有图像容器将 overflow-y 设置为自动。

另请注意，我现在使用的代码是用静态图像数据测试的。它运作良好。但是现在我使用 AJAX 从服务器端获取数据，它破坏了布局。

截图如下：

代码如下：

$(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>

如何让 MasonryJS 与 AJAX 一起工作？我已经在 SO 中尝试了现有的解决方案，但有些与我现在的结果相同，有些只是重叠图像（即使它们处于网格布局中）。

Answer 1

所以我自己修复了它。我必须首先使用 imagesLoaded.js 加载图像。然后基于答案，我在 AJAX 调用的 success 部分中使用了以下代码：

$('.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; 
}

使用带有 AJAX 的 MasonryJS 后图像左对齐

Images align left after using MasonryJS with AJAX

javascript

jquery

css

ajax

jquery-masonry