瀑布流+懒加载

你们是否见过漂亮的照片墙呢？对，就是那种照片大小不一，看似不整齐但却有一定的排版，反而让人有一种赏阅感。其实在这美妙的背后，想要做一个照片墙出来，还需要用到懒加载。那有伙伴可能就要问了，什么是懒加载，你之前也没提到过呀，是的我确实没有讲过，但是哈我有说过预加载，懒加载无非就是一次性加载的照片多一点而已，让图片在可视区加载，即仅加载可以看到的区域，监控滚动条实现，设置超过一定值时又加载图片，相比较预加载，懒加载可以优化前端性能，减少请求数或延迟请求数，减少服务器的压力，那么接下来就由我来说说吧。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script>
var ul,w,clientW,img;//定义变量
var heightArr = [],num = 2;
//heightArr用来存储照片，用来判断应该在那列插入照片
const COL = 5;//列数是5
const GAP = 10;//每一列的间距是10
var bool = false;
init();
function init(){
object.assign(document.body.style,{
margin:0,
padding:0
});
clientW = document.documentElement.clientWidth;//在一开始就先获取当前可视区域的宽度
window.addEventListenter("resize",resizeHandler);
document.addEventListener("scroll",scrollHandler);
ul = document.createElement("ul");
object.assign(ul.style,{
margin:0,
padding:0,
listStyle:"none",
width:"100%"
});
document.body.appendChild(ul);
createLi();
loadImage();
}
function createLi(){
w = (document.documentElement.clientWidth - GAP*(COL - 1))COL - 1;
//末尾减一的目的是为了保证在缩小放大浏览器窗口时，依然显示五列，不然有时候右边会留有一片空白区域
for(var i = 0;i < COL;i++){
var li = document.createElement("li");
Object.assign(li.style,{
width:w + "px",
float:"left",
marginLeft:i === 0?0:GAP + "px",//用三目表达式去除最左边的li的marginleft
})
heightArr.push(0);
ul.appendChild(li);
}
}
function resizeHandler(){
w = (document.documentElement.clientWidth - GAP*(COL - 1))COL - 1;
for(var i = 0; i < ul.children.length;i++){
var li = ul.children[i];
li.style.width = w + "px";
for(var j = 0;j < li.children.length;j++){
var img = li.children[j];
img.style.width = w + "px";
img.style.height = w/img.scale + "px"
}
}
}
function loadImage(){
bool = true;
img = new Image();
img.addEventListener("load",loadHandler);
img.src = `./img/${num}-.jpg`;
}
function loadHandler(){
var min = Math.min.apply(null,heightArr);//用math方法找出数组中最小值
var index  = heightArr.indexOf(min);//将最小值的索引保存在index中
var img = this.cloneNode(false);
img.scale = this.width/this.height;//这里算一个克隆的图片的比例，方便设置克隆照片的大小
var h = w / img.scale;
Object.assign(img.style,{
width: w + "px",
height:h + "px"
})
ul.children[index].appendChild(img);//给每一列开始添加img
if(clientW !== document.documentElement.clientWidth){
clientW = document.documentElement.clientWidth;
resizeHandler();
}
heightArr[index] +=h;
num++;
if(num > 50) num =2;
if(document.body.scrollHeight/document.documentElement.clientHeight >=3){
//首先说明这个数值3是随意给的，当然一般来说一次性加载三屏是不会影响到用户体验度的
bool = false;
return;
}
this.src = `./img/${num}-.jpg`;
}
function scrollHandler(e){
if (!bool && document.body.scrollHeight - document.documentElement.scrollTop < 2 * document.documentElement.clientHeight) {
//这是在什么时候开始加载，也就是说当滚动条的高度小于两屏的可视高度时，开始加载图片
                loadnextImage();
            }
}
function loadnextImage() {
            num++;
            if (num > 79) num = 2;
            img.src = `./img/${num}-.jpg`;
        }
</script>
</body>
</html>