将MasonryJS与AJAX结合使用后，图像向左对齐 [英] Images align left after using MasonryJS with AJAX

问题描述

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

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

请注意，我使用的是固定高度为100vh的模态.而且只有图像容器的溢出Y设置为自动.

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.

还要注意，我现在使用的代码是使用静态图像数据进行测试的.工作正常.但是现在我正在使用AJAX从服务器端获取数据，这破坏了布局.

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.

以下是屏幕截图:

代码如下:

$(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中尝试了现有的解决方案，但是有些解决方案具有与我现在相同的结果，有些解决方案只是将图像重叠(即使它们处于网格布局中).

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

推荐答案

所以我自己修复了它.我必须先使用imagesLoaded.js加载图像.然后根据此答案，我在成功部分:

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

这篇关于将MasonryJS与AJAX结合使用后，图像向左对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！