懒加载瀑布流

最新推荐文章于 2024-10-21 09:26:20 发布

小鱼酱酱酱

最新推荐文章于 2024-10-21 09:26:20 发布

阅读量602

点赞数 1

CC 4.0 BY-SA版权

分类专栏：瀑布流循环遍历原生js

本文链接：https://blog.youkuaiyun.com/chenyu1105811473/article/details/80486716

循环遍历同时被 3 个专栏收录

1 篇文章

订阅专栏

原生js

1 篇文章

订阅专栏

瀑布流

0 篇文章

订阅专栏

今天简单写下瀑布流特效

1,先放8张图片看看

<body>
<div id="container">
    <div class="box"><div class="box-img"><img src="img/pbl/1.jpg" alt=""/></div></div>
    <div class="box"><div class="box-img"><img src="img/pbl/2.jpg" alt=""/></div></div>
    <div class="box"><div class="box-img"><img src="img/pbl/3.jpg" alt=""/></div></div>
    <div class="box"><div class="box-img"><img src="img/pbl/4.jpg" alt=""/></div></div>
    <div class="box"><div class="box-img"><img src="img/pbl/5.jpg" alt=""/></div></div>
    <div class="box"><div class="box-img"><img src="img/pbl/6.jpg" alt=""/></div></div>
    <div class="box"><div class="box-img"><img src="img/pbl/7.jpg" alt=""/></div></div>
    <div class="box"><div class="box-img"><img src="img/pbl/8.jpg" alt=""/></div></div>
</div>
</body>

2,简单布局下

<style>
            *{
                padding:0;
                margin:0;
            }
            img{
                vertical-align: middle;
            }
            #container{
                position: relative;
            }
            #container .box{
                float:left;
                padding-right:10px;
                padding-top:10px;
            }
            #container .box .box-img{
                padding:5px;
                border:1px solid #ccc;
                border-radius:5px;
                background-color: #eee;
            }
        </style>

样式中没有设置container的宽度和居中,因为本次想做自适应浏览器宽度的效果(即每行图片的个数是动态的,自适应浏览器宽度的)

3,由于没有后台数据,图片数据通过文件导入了

<script src="data/pbl_JSON.js"></script>

文件是var pbl=[{src:"img/pbl/1.jpg"},{src:"img/pbl/2.jpg"},{src:"img/pbl/3.jpg"}...]的形式!

若有后台数据可用ajax方法请求,js实现的代码差异不会很大

4,采用原生js实现效果!

如下遍历元素采用了2种方法均能实现,后续会再总结其他的方法添加进来!

<script>
    var container=document.getElementById("container");
    var n=-1;//记录加载的次数
    //事件监听,待文件,图片等加载完成后运行,防止出现用es6方法先调用后定义未定义而报错!!
    window.addEventListener("load",function(){
        imgLocation("box");
        //判断如果滚动距离+浏览器高度>最后一张图片的offsetTop,则进行加载图片
        this.addEventListener("scroll",function(){
            isScroll=false;
            //实现有限的数据加载
//            if(checkAdd("box")){
//                n++;
//                for(var i=0;i<8;i++){//每次追加8张图片
//                        if(8+n*8+i>=pbl.length)return false;//当数据提供的图片全部加载完成之后跳出来!
//                        var div1=document.createElement("div");
//                        div1.className="box";
//                        container.appendChild(div1);
//                        var div2=document.createElement("div");
//                        div2.className="box-img";
//                        div1.appendChild(div2);
//                        var img=new Image();
//                        img.src=pbl[8+n*8+i].src;
//                        div2.appendChild(img);
//                        }
//                //执行加载
//                imgLocation("box");
//            }
            //实现无限数据加载
            if(checkAdd("box")){
                pbl.forEach(function(item){
                    var div1=document.createElement("div");
                        div1.className="box";
                        container.appendChild(div1);
                    var div2=document.createElement("div");
                        div2.className="box-img";
                        div1.appendChild(div2);
                    var img=new Image();
                        img.src=item.src;
                        div2.appendChild(img);
                })
                //执行加载
                imgLocation("box");
            }

        },false);

    },false);//false是冒泡阶段执行,true是捕获阶段执行

    //1 定义获取子元素集合的方法
    function getChild(child){
        var tagsAll=container.getElementsByTagName("*");
        var childArr=[];
        //for循环遍历
        for(var i=0;i<tagsAll.length;i++){
            if(tagsAll[i].className==child){
                childArr.push(tagsAll[i]);
            }
        }

        //forEach遍历数组
//        [...tagsAll].forEach(function(item){//...tagsAll是将集合编程的那个的元素,ES6扩展运算符
//                if(item.className==child){
//                    childArr.push(item);
//                }
//                })
//        console.log(childArr);
        return childArr;
    }

    //2 (完成布局)把图片居中并随着浏览器的宽度改变,一排显示的图片数量也改变,并且container居中!
    function imgLocation(child){
        var box=getChild(child);
        var imgW=box[0].offsetWidth;
        //var num=Math.floor(document.documentElement.clientWidth/imgW);//使用Math.floor运算符向下取整
        var num=~~(document.documentElement.clientWidth/imgW);//位运算~~,表示去掉小数部分
        container.style.cssText="width:"+imgW*num+"px;margin:0 auto";//使container居中
    //3 计算每列的最小高度和对应的索引值
        var heightArr=[];
        var minIndex=0;
        [...box].forEach(function(item,index){
            if(index<num){
                heightArr.push(item.offsetHeight);
            }else{
                //获得最小高度:minHeight (用apply方法或者...[]方法)
                // var minHeight=Math.min.apply(null,heightArr);
                  var minHeight=Math.min(...heightArr);

                //获得最小高度的索引值:minIndex
                heightArr.forEach(function(item,index){
                    if(item==minHeight){
                        minIndex=index;
                    }
                })

    //4  将索引值在num后面的图片放在最小高度的后面
                item.style.cssText="position:absolute;top:"+minHeight+"px;left:"+box[minIndex].offsetLeft+"px";

    //5  之后更新heightArr[minIndex]的值,使后面的图片不断进行高度比较!
                heightArr[minIndex]+=item.offsetHeight;
                console.log(heightArr);
            }
        })
    }
    //最后  判断鼠标滚动事件进行加载
    function checkAdd(child){
        var box=getChild(child);
        var lastBox=box[box.length-1];
        var lastTop=lastBox.offsetTop;
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        var clientH=document.documentElement.clientHeight||document.body.clientHeight;
        if(scrollTop+clientH>lastTop){
            console.log(1);
            return true;
        }
    }

</script>

若有问题请提出,谢谢~