JS 懒加载瀑布流

最新推荐文章于 2024-05-19 13:47:41 发布

甘乐2333

最新推荐文章于 2024-05-19 13:47:41 发布

阅读量508

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_35254240/article/details/91465159

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

//Util1.js

var Utils=(function () {
    return {
        //SSS
        loadImg:function (srcList,callBack) {
            var img=new Image();
            img.num=0;
            img.imgList=[];
            img.srcList=srcList;
            img.callBack=callBack;
            img.addEventListener("load",this.loadHandler);
            img.src="./img/"+srcList[img.num];

        },
        loadHandler:function (e) {
            // console.log(this.num);
            // console.log(this.imgList);
            // console.log(this.callBack);
            this.imgList.push(this.cloneNode(false));
            this.num++;
            if(this.num>=this.srcList.length){
                this.callBack(this.imgList);
                return;
            }
            //事件侦听没有被删除,只需更改src,加载后仍然触发了该事件,进入该函数
            this.src="./img/"+this.srcList[this.num];
        },
        ce:function (type,style) {
            var elem=document.createElement(type);
            Object.assign(elem.style,style);
            return elem;
        },
        randomColor:function () {
            var col="#";
            for(var i=0;i<6;i++){
                col+=Math.floor(Math.random()*16).toString(16);
            }
            return col;
        }
    }
})();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/Utils1.js"></script>
</head>
<body>
    <script>
        /*
        *
        *  1\创建ul,创建li,创建指定数量的li,并且做浮动,设置各li的宽度
        *  2\创建一个数组,这个数组里面是统计每个li的当前高度
        *  3\创建图片,加载图片,设置图片宽度,获取图片高度
        *  4\寻找数组中最小高度的索引值,在li中找到这个索引值对应的列,
        *  5\将加载进来图片放入在这个列中并且累加高度存储在数组中对应的元素中
        *  6\继续加载新的图片,加载图片当数量都完成后,让数值归3
        *
        * */
        var bodyWidth,colWidth,ul,img;//可视化页面宽度    每个li的宽度
        let {ce,randomColor}=Utils;//解构赋值 将Utils中的 ce randomColor方法赋予 ce randomColor
        var minHeight=[],//最小高度
            position=3;//图片名，最小图片名为3
        const COL=5,//创建li的个数  有几列
              MARGIN=10;
        init();
        function init() {
            document.body.style.margin="0px";
            bodyWidth=document.documentElement.clientWidth;//可视化页面宽度
            //每个li的宽度
            colWidth=(bodyWidth-MARGIN*(COL-1))/COL;  
            createUl();//创建ul
            loadImage();//加载图片

        }
        
        function scrollHandler() {//滑动事件
        	//（页面内容高度-滚动隐藏到内容高度）<2*可视化窗口宽度
            if(document.documentElement.scrollHeight-document.documentElement.scrollTop<2*document.documentElement.clientHeight){
//                console.log("继续");
                window.removeEventListener("scroll",scrollHandler);//移除监听滚动
                addImage();//滚动到（页面内容高度-滚动隐藏到内容高度）<2*可视化窗口宽度  加图
            }
        }

        function createUl() {//创建ul
            ul=ce("ul",{
                listStyle:"none",
                margin:"0px",
                padding:"0px"
            });
            for(var i=0;i<COL;i++){//创建li
                var li=ce("li",{
                    marginLeft: i===0 ? "0px" : MARGIN+"px",
                    width:colWidth+"px",
                    float:"left"
                });
                minHeight.push(0);//往minHeight添加col（5）次最低高度0
                ul.appendChild(li);
            }
            document.body.appendChild(ul);
            window.addEventListener("resize",resizeUl)//window添加监听resize事件
        }
    
        
        function loadImage() {//加载图片
            img=new Image();
            img.addEventListener("load",loadHandler);
            img.src="./img611/"+position+"-.jpg"//图片路径
//            img.src=`./img/${position}-.jpg`;
        }
        
        function loadHandler(e) {//图片加载事件
            var img=this.cloneNode(false);//复制图片
            var scale=img.width/img.height;
//            图片有两个宽高,一个是样式宽高(放在body中以后才可以获取),另一个是图片宽高,不放在页面中也可以获取
            img.width=colWidth;
            img.height=colWidth/scale;
            var min=Math.min.apply(null,minHeight);//取数组minHeight的最小值
            var index=minHeight.indexOf(min);//找最小值的下标
            ul.children[index].appendChild(img);//给高度最小的li添加新图片
            minHeight[index]+=img.height;//minHeight数组更新添加图片li 的高度
            resizeUl();//重设ul，li，图片大小
			//（页面内容高度-滚动隐藏到内容高度）/可视化窗口高度     设置图片加载到 下方3倍自身可视化窗口的高度
            if((document.documentElement.scrollHeight-document.documentElement.scrollTop)/document.documentElement.clientHeight>=3){
                window.addEventListener("scroll",scrollHandler);//添加滚动监听事件
                return;
            }
            addImage();//正常加图    设置图片加载到 下方3倍自身可视化窗口的高度
        }

        function addImage() {
            position++;
            if(position>79){//可重复加载图片
                position=3;
            }
            img.src="./img611/"+position+"-.jpg";
        }
        
        function resizeUl() {//重设ul，li，图片大小
            if(bodyWidth===document.documentElement.clientWidth) return;//页面宽度和可视化窗口宽度一致返回（和上次页面大小一致）
//          console.log("aaaa");
            bodyWidth=document.documentElement.clientWidth;//重新获取可视化页面宽度
            //重新获取每一列宽度
            colWidth=(bodyWidth-MARGIN*(COL-1))/COL;
            for(var i=0;i<ul.children.length;i++){//li
                var li=ul.children[i];
                li.style.width=colWidth+"px";//重新赋予li宽度
                var sum=0;//记录每个li的高度
                for(var j=0;j<li.children.length;j++){
                    var img=li.children[j];
                    //计算图片宽高比，保持图片比例
                    var scale=img.width/img.height;
                    img.width=colWidth;
                    img.height=colWidth/scale;
                    sum+=img.height;//累加记录每个li的高度
                }
                minHeight[i]=sum;//记录每个li的高度
            }
        }
    </script>
</body>
</html>

甘乐2333

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS 懒加载瀑布流

//Util1.jsvar Utils=(function () { return { //SSS loadImg:function (srcList,callBack) { var img=new Image(); img.num=0; img.imgList=[]; ...
复制链接

扫一扫