图片瀑流动态加载图片堆叠解决方案
图片堆叠是由于图片未加载完成导至计算位置不准确的问题
解决方案就是使用imagesloaded.min.js 等图片加载完在执行瀑流布局
必要js
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
注意jquery版本，发现jquery.2.1.4.min.js会报以下错误
imagesloaded.min.js:12 Uncaught TypeError: h is not iterable at new n (imagesloaded.min.js:12:433) at i.fn.imagesLoaded (imagesloaded.min.js:12:4286) at Object.success (glance.js?v=1750470715:167:31) at j (jquery.2.1.4.min.js:2:26925) at Object.fireWith [as resolveWith] (jquery.2.1.4.min.js:2:27738) at x (jquery.2.1.4.min.js:4:11253) at XMLHttpRequest.<anonymous> (jquery.2.1.4.min.js:4:14765)
关键方法
// 关键步骤：等待图片加载
$newElems.imagesLoaded().done(function() {
$grid.append($newElems).masonry('appended', $newElems);
});核心方法
var itemHtml = [];
data.data.map((res)=>{
itemHtml.push(`
<div class="grid-item">
<div class="item">
<a href="/goods/view/${res.id}.html" title="${res.title}" target="_blank" title="${res.title}"><img src="${res.cover}" alt="${res.title}" onerror="this.src='/static/img/img_err.png'"></a>
</div>
</div>`);
});
//动态布局
var $newElems = $(itemHtml.join(''));
$newElems.imagesLoaded().done(function() {
$grid.append($newElems).masonry('appended', $newElems);
$('.addMore').html('');
isLoading = false;
});