鍍金池/ 問答/HTML5  HTML/ 瀑布流懶加載下拉滾動條加載下一頁面測不到下一頁。

瀑布流懶加載下拉滾動條加載下一頁面測不到下一頁。

按網(wǎng)上一個懶加載的視頻教程抄下來，前面都沒有問，但在這一步增加了四行，得出的結(jié)果不一樣，沒有出現(xiàn)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>網(wǎng)站</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(){//當(dāng)頁面加載的時候
            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.clientHeight || document.body.clientHeight;
            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);//計算橫排顯示的個數(shù)
            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("*");//獲取到所有的標(biāo)簽console.log(contentArr)
            for(var i=0;i<allcontent.length;i++){//循環(huán)遍歷所有的標(biāo)簽
                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){//得到數(shù)組里面圖片的最小的高度
            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>

第一張圖是視頻上的，第二張是本人抄視頻的
圖片描述
圖片描述

回答
編輯回答
檸檬藍(lán)

你現(xiàn)在給出的代碼和你圖片上截屏的代碼是不同的，特別是函數(shù)聲明checkFlag中

var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;

而你的圖片上寫的是

var pageHeight = document.documentElement.clientHeiht || document.body.clientHeiht; //這里clientHeight誤寫為 clientHeiht了，注意兩個都寫錯誤了，所以pageHeight的值不正確了，所以不起效。

你要注意檢查代碼的正確性。

2018年1月17日 04:09