js實現瀑布流以及加載效果

1、瀑布流是個啥？

　　瀑布流，是比較流行的一種網站頁面佈局，視覺表現爲良莠不齊的多欄佈局，隨着頁面滾動條向下滾動，這種佈局還會不斷加載數據塊並附加至當前尾部。

　　最先採用瀑布流佈局的網站是Pinterest，逐漸在國內流行開來，好比咱們熟知的百度圖片的佈局，在「好久」之前，百度圖片仍是須要一頁一頁的點擊進行查看更多圖片，而如今的瀑布流佈局使用戶查找圖片更加方便。

　　

 

2、瀑布流的優缺點

　　優勢：

　　　　1.節省了頁面的空間，再也不須要導航和頁碼按鈕。

　　　　2.加強了用戶的體驗，使用戶的體驗更多的是在於瀏覽圖片上，而不是在尋找怎麼找下一頁和切換的操做上。

　　缺點：

　　　　1.使用的網頁類型有限：

　　　　這種瀑布流佈局只適用於某些特定類型產品中一部分特定類型的內容。

　　　　好比咱們在某寶買東西時，咱們就須要記住第幾頁的哪一個商品是咱們想買的，而後再回頭購買，這時候就須要咱們的頁面按鈕來幫忙記憶，瀑布流反而更加麻煩。

　　　　2.永遠看不到的頁腳：

　　　　若是咱們使用瀑布流無限滾動加載模式，那就是說咱們永遠也沒法看到咱們的頁腳，當用戶一次次的瀏覽到頁面底部，看到頁腳，卻由於自動加載的內容的忽然出現，不管怎樣都沒法點擊到頁腳中的連接或登陸時，那麼用戶的體驗是極爲糟糕的，他們可能會憤怒的關掉你的網頁。

　　　　3.關於頁面數量：

　　　　對於用戶來講，使用瀑布流自動加載來替代傳統的換頁實際上是很方便的，而對於開發者的網站來講，頁面的減小可能就沒法展現更多地相關信息，最明顯的就是廣告減小。

　　

　　3、瀑布流寫法及原理

　　瀑布流到底長什麼樣子呢，那咱們如今就來默寫一個簡單的瀑布流佈局。先把亂七八糟的基礎樣式和佈局稍微的敲一下~這裏咱們爲了節省空間，就不縮進啦~

　　CSS:

*{margin: 0;padding: 0;}    
#wrap{width: 840px;margin: 0 auto;border: 1px solid black;overflow: hidden;}
#wrap ul{width: 200px;margin: 0 5px;float: left;}
#wrap ul li{width: 200px;list-style: none;margin: 10px 0;background: palegreen;font-size: 50px;color: white;text-align: center;}

　　HTML:

<div id="wrap">
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
</div>

　　如下是簡單的JS代碼：

var wrap=document.querySelector("#wrap");
var ul=document.querySelectorAll("#wrap ul");//聲明元素塊
//先建立一個隨機數的函數
function ranDom(min,max){
    return Math.random()*(max-min+1)+min;
}
//再建立一個添加li的函數
function createLi(num){
    for(var i=0;i<num;i++){
        var newLi=document.createElement("li");//建立li
        newLi.style.height=ranDom(100,400)+"px";//使用隨機數函數建立高度不一樣的li
        var arrul=[];
//將ul的高度進行儲存和比較
        for(var j=0;j<ul.length;j++){
            arrul.push(ul[j].offsetHeight);//儲存ul的高度
        }
        var minHeight=arrul[0];
        var minIndex=0;
        for(var k=0;k<arrul.length;k++){
            if(minHeight>arrul[k]){
                minHeight=arrul[k];//比較出高度最短的ul而後賦值給minHeight
                minIndex=k;//把高度最短的ul所在下標賦值給minIndex
            }
        }
    ul[minIndex].appendChild(newLi);//向高度最短的ul裏添加li
    }    
}
createLi(15);//執行函數，添加15個li，
//建立一個滾動事件
window.onscroll=function(){  
// html總高度-可視化窗口高度=body的滾動高度
//兼容寫法  
    var scrollTop=document.body.scrollTop;  
    var clientHeight=document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight;  
    if(document.documentElement.offsetHeight-clientHeight<=scrollTop){  
        createLi(15);  
    }  
}
//當滾動快要到達底部,尚未到達的時候,再去執行函數,建立新的li 

　　這樣咱們就實現了永遠也看不到頁腳的自動加載瀑布流佈局。

　　

4、總結

　　瀑布流簡單來說就是頁面容器內的多個高度不固定的容器之間良莠不齊的添加內容，鼠標滾動時不斷在容器內的尾部加載數據，且自動加載到空缺位置，也就是例子中的高度最短的位置，不斷循環。

　　瀑布流對於圖片的展示，是高效而具備吸引力的，用戶一眼掃過的快速閱讀模式能夠在短期內得到更多的信息量,而瀑布流裏自動加載又避免了用戶鼠標點擊的翻頁操做。

　　瀑布流的主要特性即是錯落有致，定寬而不定高的設計讓頁面區別於傳統的矩陣式圖片佈局模式，巧妙的利用視覺層級，視線的任意流動又緩解了視覺疲勞，同時給人以不拘一格的感受。