无线滚动瀑布流(内容无限加载)

ゞ浴缸里的玫瑰 2021-07-24 15:38 434阅读 0赞

解决问题：  
当图片最后一张顶部到整个div顶部不包括边框的距离大于浏览器不包括上窗口的高度加上滑动滚动距离时，加载后面的图片

浏览器不包括上窗口高度:document.documentElement.clientHeight;

代码示例:

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * { 
                margin: 0;
                padding: 0
            }
    
            .box { 
                margin: 0 auto;
                position: relative;
            }
    
            img { 
                margin: 10px;
                padding: 10px;
                border: 1px solid pink;
                border-radius: 10px;
                box-shadow: 5px 5px 10px skyblue;
            }
    
            .w { 
                float: left;
            }
    
        </style>
    </head>
    <body>
    <div class="box"></div>
    <script>
        //1.获取页面元素
        var box = document.querySelector('.box');
        //2.准备数据源
        var dataStr = '{"src":["i1.jpg","i2.jpg","i3.jpg","i4.jpg","i5.jpg","i6.jpg","i7.jpg","i8.jpg","i9.jpg","i10.jpg","i11.jpg","i12.jpg","i13.jpg","i14.jpg","i15.jpg"]}';
        var data = JSON.parse(dataStr);
        //遍历对象的src属性确定创建多少个div
        function addImg() { 
            for (var i = 0; i < data.src.length; i++) { 
                var imgDiv = document.createElement('div');
                imgDiv.className = 'w';
                var img = document.createElement('img');
                img.src = 'img/' + data.src[i];
                imgDiv.appendChild(img);
                box.appendChild(imgDiv);
            }
        }
        function createGreateWall() { 
            //1.让瀑布流居中显示
            //1.1获取视口的宽度
            var viewWidth = document.documentElement.clientWidth;
            //1.2用视口的宽度/一个div的宽度 拿到数量
            var divs = document.querySelectorAll('.w');
            var oneWidth = divs[0].offsetWidth;
            var count = Math.floor(viewWidth / oneWidth);
            //1.3数量*一个div的宽度
            box.style.width = count * oneWidth + 'px';
            //2.瀑布流成型
            //2.1存储第一行每个元素的高度
            var heightArr = [];
            for (var i = 0; i < divs.length; i++) { 
                if (i < count) { //4 0 1 2 3
                    heightArr.push(divs[i].offsetHeight);
                } else { 
                    divs[i].style.position = 'absolute';
                    /** * 第二行的每张图片都是从上一行高度最小的图片下开始添加 * 0.获取上一行高度最小的图片 * 1.获取上一行高度最小图片的高 Y offsetLeft X */
                    //不是第一行 计算第二行每个图片的位置
                    var minValue = Math.min.apply(null, heightArr);
                    //获取最小值在数组内的下标
                    var minIndex = heightArr.indexOf(minValue);
                    var x = divs[minIndex].offsetLeft;
                
                    //定位确定位置
                    divs[i].style.left = x + 'px';
                    divs[i].style.top = minValue + 'px';
                    heightArr[minIndex] = heightArr[minIndex] + divs[i].offsetHeight;
                    //console.log(minValue,divs[minIndex].offsetHeight);
                }
            }
        }
        
        addImg();
        window.onload = function () { 
          createGreateWall();
        }
        //判断函数
        function judge()
        { 
        	//当前视口高度加上滚动距离>最后一张图片距离父元素的高度
        	var viewHeight=document.documentElement.clientHeight;
        	var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
        	//获取最后一个元素高度
        	var divs=document.querySelectorAll(".w");
        	var lastHeight=divs[divs.length-1].offsetTop;
        	if(viewHeight+scrollTop>lastHeight)
        	{ 
        		return true;
        	}else{ 
        		return false;
        	}
        }
        
        window.onscroll=function()
        { 
        	//是否进行数据的填充
        	if(judge())
        	{ 
        		addImg();
        		createGreateWall();
        	}
        }
    
    
    </script>
    </body>
    </html>