案例十二、JavaScript實現無窮滾動加載數據

首先實現滾動要藉助onscroll事件處理程序。
無窮滾動就是滑動滾動條，實現數據塊的無窮加載。
我們以瀑布流的佈局來實現無窮加載。瀑布流就是一些等寬不等高的數據塊佈局。在滾動條下拉時，它會進行加載。那麼問題就是在判斷什麼時候應該加載。

我們首先應該明白瀑布流佈局的特點。它將下一個圖片總是放在當前列數最低的那一列。所以當加載最後一個藍色的圖片時，也就無疑是最後一個圖片了。所以要判斷該圖片加載到什麼程度來觸發滾動事件。
圖上灰色的表示頁面的大小，後面藍色邊框表示窗口的大小。當拖動滾動條時，灰色部分上移。我們希望頁面最後一個圖片（藍色圖片）加載一半時觸發滾動事件。那麼就要形成參照。

下來寫代碼：

//檢測是否具備滾動條加載數據塊的條件

function checkScrollSlide(){

    var oparent = document.getElementById('main');

    var oBoxs = getByClass(oparent,'box');

    var scrollH = document.body.scrollTop || document.documentElement.scrollTop + document.body.clientHeight || document.documentElement.clientHeight;

   var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight/2);

    return (lastBoxH < scrollH )? true : false;
}

getClass是根據類名查找元素集合的自己寫的函數，待會兒會附上源碼

我們要進行加載的數據塊的格式是這樣的.每個圖片被一個class= pic的div包裹。最後整體屬於父元素main

<div id = "main">
    <div class = "box">
        <div class = "pic">
            <img src = "images/0.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/1.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/2.jpg">
        </div>
    </div>
<div>

首先我們要加載的數據塊應該是從後臺傳過來的，在這裏我們用json模擬一下就可以：

var DataIn = {"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'}]};

比如這個就是後臺傳過來的數據。

上面的函數返回一個布爾值，當爲true時，觸發滾動事件。

  window.onscroll = function(){
    var oparent = document.getElementById('main');
    //當滿足加載條件時，就要向頁面中加載數據塊
    if(checkScrollSlide){
        for(var i = 0; i< DataIn.data.length; i++){
                var oBox = document.createElement('div');
                oBox.className = 'box';
                oparent.appendChild(oBox);

                var opic = document.createElement('div');
                opic.className = 'pic';
                oBox.appendChild(opic);

                var oImg = document.createElement('img');
                oImg.src = './images/'+DataIn.data[i].src;
                opic.appendChild(oImg);

            }
            waterFull('main','box');
        }
    }
}

附上源碼：
css和html

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<script src = "./jswaterfll.js"></script>
    <title>瀑布流佈局</title>
    <style type="text/css">
    *{
        padding: 0px;
        margin: 0px;
    }

    #main{
        position: relative;

    }
    .box{
/*      display: inline-block;*/
        padding: 15px 0px 0px 15px;
        float: left;

    }
    .pic{
        padding: 10px;
        border-radius: 5px;
        border:1px solid #ccc;
        box-shadow: 0 0 5px #ccc;
    }

    .pic img{
        width: 165px;
        height: auto;
    }
    </style>
</head>
<body>
<div id = 'main'>
    <div class = "box">
        <div class = "pic">
            <img src = "images/3.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/4.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/20.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/21.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/2.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/3.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/4.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/5.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/6.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/7.jpg">
        </div>
    </div>

    <div class = "box">
        <div class = "pic">
            <img src = "images/8.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/9.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/10.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/11.jpg">
        </div>
    </div>

    <div class = "box">
        <div class = "pic">
            <img src = "images/17.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/18.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/19.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/4.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/5.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/6.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/7.jpg">
        </div>
    </div>

    <div class = "box">
        <div class = "pic">
            <img src = "images/8.jpg">
        </div>
    </div>

    <div class = "box">
        <div class = "pic">
            <img src = "images/11.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/12.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/13.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/14.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/15.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/16.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/17.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/18.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/19.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/20.jpg">
        </div>
    </div>
    <div class = "box">
        <div class = "pic">
            <img src = "images/21.jpg">
        </div>
    </div>
</div>
</body>
</html>

js代碼：

window.onload = function(){
    waterFull('main','box');

    var DataIn = {"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'}]};
    window.onscroll = function(){
        var oparent = document.getElementById('main');
        if(checkScrollSlide){
            for(var i = 0; i< DataIn.data.length; i++){
                var oBox = document.createElement('div');
                oBox.className = 'box';
                oparent.appendChild(oBox);

                var opic = document.createElement('div');
                opic.className = 'pic';
                oBox.appendChild(opic);

                var oImg = document.createElement('img');
                oImg.src = './images/'+DataIn.data[i].src;
                opic.appendChild(oImg);

            }
            waterFull('main','box');
        }
    }
}

function waterFull(parent,children){
    var oParent = document.getElementById(parent);
    //var oBoxs = parent.querySelectorAll(".box");

     var oBoxs = getByClass(oParent,children);

    //計算整個頁面顯示的列數

    var oBoxW = oBoxs[0].offsetWidth;

    var cols = Math.floor(document.documentElement.clientWidth/oBoxW);

    //設置main的寬度，並且居中

    oParent.style.cssText = 'width:'+oBoxW * cols +'px; margin: 0 auto';

    //找出高度最小的圖片，將下一個圖片放在下面

    //定義一個數組，存放每一列的高度，初始化存的是第一行的所有列的高度

    var arrH = [];

    for(var i = 0; i< oBoxs.length ; i++){
        if(i < cols){
            arrH.push(oBoxs[i].offsetHeight);
        }
        else{
            var minH = Math.min.apply(null,arrH);

            var minIndex = getMinhIndex(arrH,minH);

            oBoxs[i].style.position = 'absolute';
            oBoxs[i].style.top= minH + 'px';
            //oBoxs[i].style.left = minIndex * oBoxW + 'px'; 
            oBoxs[i].style.left = oBoxs[minIndex].offsetLeft+'px';

            arrH[minIndex] += oBoxs[i].offsetHeight; 
        }
    }


}
function getByClass(parent,className){

    var boxArr = new Array();//用來獲取所有class爲box的元素

    oElement = parent.getElementsByTagName('*');

    for (var i = 0; i <oElement.length; i++) {

        if(oElement[i].className == className){

            boxArr.push(oElement[i]);

        }
    };
    return boxArr;
}


//獲取當前最小值得下標
function getMinhIndex(array,min){

    for(var i in array){

        if(array[i] == min)

            return i;
    }
}

//檢測是否具備滾動條加載數據塊的條件
function checkScrollSlide(){
    var oparent = document.getElementById('main');
    var oBoxs = getByClass(oparent,'box');
    var scrollH = document.body.scrollTop || document.documentElement.scrollTop + document.body.clientHeight || document.documentElement.clientHeight;
    var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight/2);

    return (lastBoxH < scrollH )? true : false;
}

案例十二、JavaScript實現無窮滾動加載數據

overflow:hidden不起作用？

jquery獲取span標籤下的第一個span子標籤內容

案例十四、css3和fullpage實現全屏滾動

更詳細的天氣預報接口

超級簡單Vue實現手風琴佈局

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結