思路
- 直接使用masonry.js的话加载时会导致图片重叠,所以引入
imagesLoaded.js,图片加载后再使用masonry.js布局
masonry.js+imageLoaded
var $grid = $('.grid').imagesLoaded( function() {
$grid.masonry({
});
});
- 类似于网页中加载更多时,会使用ajax,点击一次会进行一次ajax请求,数据图片数据会拼接,此时新的数据会覆盖之前的数据,所以还需要用到masonry.js的两个配置
$(".masonry-wrap").imagesLoaded(function() {
$('.masonry-wrap').masonry('reloadItems');
$('.masonry-wrap').masonry('layout');
});
实现
cdn
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/masonry/4.2.2/masonry.pkgd.min.js"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery.imagesloaded/5.0.0/imagesloaded.pkgd.js" type="application/javascript"></script>
html
<div class="container text-capitalize mb-16 pt-4 pt-sm-0">
<h2 class="fs-5 fw-bold mb-6"><?= $curCate['title'] ?></h2>
<div class="row row-cols-sm-4 row-cols-2 g-4 g-sm-8 masonry-wrap" id="newsList">
</div>
<div class="text-center pt-10r pb-16 position-relative bg-linear-white" style="margin-top: -150px" id="newsMore">
<a class="d-inline-flex align-items-center px-6 py-4 border border-black fs-3 hover-primary" onclick="newsMore(page)">
more
<i class="ms-4 fa-solid fa-chevron-right"></i>
</a>
</a>
</div>
</div>
js
$(".masonry-wrap").imagesLoaded(function() {
$(".masonry-wrap").masonry({
percentPosition: true,
});
});
var page = 1;
newsMore(page);
function newsMore(p) {
$.post('/public/newsList', {
p,
limit: 16,
cate_id: cateId
}, (res) => {
if (res.data.last_page == 0) {
$(".empty").show();
} else {
$(".empty").hide();
}
if (page > res.data.last_page) {
$("#newsMore").hide();
return false;
}
let news = '';
let data = res.data.data
for (let i = 0; i < data.length; i++) {
news += `<div class="col">
<a data-caption="${data[i].title}" data-fancybox="a" href="//qn1.10soo.net${data[i].img_cover[0]}">
<div class="position-relative h-100 hover-scale-1_05-wrap scalex-wrap">
<div class="tran_0_5 w-100 h-100 position-absolute start-0 top-0 bg-danger hover-scale-1_05"></div>
<div class="w-100 position-relative hover-zoomin-wrap">
<div class="overflow-hidden">
<img class="w-100 position-relative hover-zoomin" src="//qn1.10soo.net${data[i].img_cover[0]}" alt="" />
</div>
<div class="p-6 bg-gray-2">
<p class="fw-bold fs-1 mb-2 text-truncate" href="">${data[i].title}</p>
<span class="fs--1 d-block text-truncate">${data[i].shape_size}</span>
</div>
</div>
</div>
</a>
</div>`;
}
$("#newsList").append(news);
$(".masonry-wrap").imagesLoaded(function() {
$('.masonry-wrap').masonry('reloadItems');
$('.masonry-wrap').masonry('layout');
});
page++;
if (page > res.data.last_page) {
$("#newsMore").hide();
}
})
}