https://segmentfault.com/a/11...
参考了这篇文章的懒加载
问题描述：图片刚出来时全叠在一起（把lazyLoad写在onload里只是便于测试），改变窗口的大小时图片恢复正常，请问这个问题怎么解决？
改变窗口大小后：
贴代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/reset.css">
<script src="./js/index.js"></script>
</head>
<body>
<div class="wrapper">
</div>
</body>
</html>.wrapper{
width: 100%;
margin: 0 auto;
position: relative;
}
img{
width: 291.8px;
border-radius: 0.3em;
box-shadow: 0 2px 4px 0 rgba(34,36,38,0.2),0 2px 10px 0 rgba(34,36,38,0.1);
cursor: pointer;
position: absolute;
}let items = document.getElementsByClassName("item");
let gap = 12;
function waterFall(){
let pageWidth = getClient().width;
let itemWidth = items[0].offsetWidth;
//列数 = 页面的宽度 / 图片的宽度
let columns = parseInt(pageWidth/(itemWidth + gap));
//定义一个数组，用来存储元素的高度
let arr = [];
for(let i = 0; i < items.length; i++){
if(i < columns){
//满足这个条件则说明在第一行
items[i].style.top = 0;
items[i].style.left = (itemWidth + gap) * i + 'px';
arr.push(items[i].offsetHeight);
}
else{
//其他行，先找出最小高度列，和索引
let minHeight = arr[0];
let index = 0;
for(let j = 0; j < arr.length; j++){
if(minHeight > arr[j]){
minHeight = arr[j];
index = j;
}
}
items[i].style.top = arr[index] + gap + 'px';
items[i].style.left = items[index].offsetLeft + 'px';
arr[index] = arr[index] + items[i].offsetHeight + gap;
}
}
}
//clientWidth 兼容性处理
function getClient(){
return{
width : window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
Height : window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
}
//scrollTop兼容性处理
function getScrollTop(){
return window.pageYOffset || document.documentElement.scrollTop;
}
// num用于统计当前显示到了哪一张图片，避免每次都从第一张图片开始检查是否露出
let num = 0;
function lazyLoad(){
let viewHeight = getClient().Height;
for (let i = num; i < items.length; i++) {
// 用可视区域高度减去元素顶部距离可视区域顶部的高度
let distance = viewHeight - items[i].getBoundingClientRect().top;
// 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明元素露出
if (distance >= 0) {
// 给元素写入真实的src，展示图片
items[i].src = items[i].getAttribute("data-src");
// 前i张图片已经加载完毕，下次从第i+1张开始检查是否露出
num = i + 1;
}
}
}
function debounce(fn, delay = 500) {
//防抖函数
let timer = null;
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.call(this, args);
}, delay);
};
}
window.onload = function(){
waterFall();
lazyLoad();
}
window.addEventListener("scroll", debounce(lazyLoad, 600), false);
//当页面尺寸发生变化时，触发函数，实现响应式
window.onresize = function () {
waterFall();
}求大佬支招，感激不尽~！
###突然有个灵感，你可以试试
<img class="item" ... /> 加载完成后，增加 class item-loaded
/* .item 默认不显示 */
.wrapper .item {display:none;}
/* .item-loaded 默认显示 */
.wrapper .item-loaded {display:block;}
/* 任意一个未加载完成的 .item，其后的 .item-loaded 依然不显示 */
.wrapper .item:not(.item-loaded) ~ .item-loaded {display:none;}
相关文章
精彩导读
热门资讯