瀑布流懒加载下拉滚动条加载下一页面测不到下一页。_JavaScript_论坛

瀑布流懒加载下拉滚动条加载下一页面测不到下一页。

陌***3 分类：JavaScript 人气：958 回帖：1 发布于6年前收藏

按网上一个懒加载的视频教程抄下来，前面都没有问，但在这一步增加了四行，得出的结果不一样，没有出现2字，瀑布流懒加载下拉滚动条加载下一页面测不到下一页。

<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>网站</title>
    <meta name="description" content="">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #container {
            position: relative;
        }
        
        .box {
            float: left;
            padding: 5px;
        }
        
        .box-img {
            padding: 5px;
            border: 1px solid #ccc;
            box-shadow: 0 0 5px #ccc;
            border-radius: 5px;
        }
        
        .box-img img {
            width: 230px;
            height: auto;
        }

    </style>
</head>

<body>
    <div id="container">
        <div class="box">
            <div class="box-img">
                <img src="images/1.jpg"">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="images/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="images/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="images/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="images/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="images/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="images/7.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="images/8.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="images/9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="images/10.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="images/11.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="images/12.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="images/13.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="images/14.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="images/15.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="images/16.jpg">
            </div>
        </div>
    </div>
    <script>
        window.onload = function(){//当页面加载的时候
            imglocation("container","box");
            
            
            window.onscroll = function(){
                if(checkFlag()){ 
                    console.log(2)
                }
            
            }
            
            
        }
        
        function checkFlag(){
            /* 
                页面的高度+滚动条滚动的高度〉最后一张图片的距离浏览器顶部的高度
            */
            var cparent = document.getElementById("container");
            var ccontent = getchildElement(cparent,"box");
            var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var pageHeight = document.documentElement.clientHeiht || document.body.clientHeiht;
            if(scrollTop + pageHeight > lastContentHeight){
                return true;
            }    
        }
        //完善图片的布局 （页面的宽度/图片的宽度）
        function imglocation(parent,content){
            //将parent下所有的content全部取出
            var cparent = document.getElementById(parent);
            var ccontent = getchildElement(cparent,"box");
            var imgWidth = ccontent[0].offsetWidth;//获取图片的宽度
            var num = Math.floor(document.documentElement.clientWidth / imgWidth);//计算横排显示的个数
            cparent.style.cssText = "width:"+imgWidth*num+"px;margin: 0 auto";
            
            //计算图的高度
            var boxheightArr = [];
            for(var i=0;i<ccontent.length;i++){
                if(i<num){
                    boxheightArr[i] = ccontent[i].offsetHeight;
                }else{
                    var minHeight = getMin(boxheightArr);
                    var minIndex = getMinHeightLocation(boxheightArr,minHeight);
                    ccontent[i].style.position = "absolute";
                    ccontent[i].style.top = minHeight + "px";
                    ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";
                    boxheightArr[minIndex] = boxheightArr[minIndex] + ccontent[i].offsetHeight;//更新最小的高度
                }
                
            }
            //console.log(num)
        }
        
        function getchildElement(parent,content){//得到子集的空间
            var contentArr = [];
            var allcontent = parent.getElementsByTagName("*");//获取到所有的标签console.log(contentArr)
            for(var i=0;i<allcontent.length;i++){//循环遍历所有的标签
                if(allcontent[i].className == content){
                    contentArr.push(allcontent[i]);
                }
            }
            return contentArr;
        }
        
        function getMinHeightLocation(boxheightArr,minHeight){//得到图片的最小高度的序列号
            for(var i in boxheightArr){
                if(boxheightArr[i] == minHeight){
                    return i;
                }
            }
        }
        function getMin(arr){//得到数组里面图片的最小的高度
            var arrLen = arr.length;
            for(var i=0,ret=arr[0];i<arrLen;i++){
                ret = Math.min(ret,arr[i])
            }
            return ret;
        }
    </script>

</body>

</html>

第一张图是视频上的，第二张是本人抄视频的

标签：css html5 javascript

讨论这个帖子（1）垃圾回帖将一律封号处理……

Lv6 码匠

遗***迹学生 6年前#1

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取