将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屋!