導語：瀑布流，是比較流行的一種網站頁面佈局，視覺表現為參差不齊的多欄佈局，隨著頁面滾動條向下滾動，這種佈局還會不斷載入資料塊並附加至當前尾部，下面小編給大家提供的是如何使用javascript實現瀑布流及效果載入，更多詳情請關注應屆畢業生考試網。
一、瀑布流是個啥?
瀑布流，是比較流行的一種網站頁面佈局，視覺表現為參差不齊的多欄佈局，隨著頁面滾動條向下滾動，這種佈局還會不斷載入資料塊並附加至當前尾部。
最早採用瀑布流佈局的網站是Pinterest，逐漸在國內流行開來，比如我們熟知的百度圖片的佈局，在“很久”以前，百度圖片還是需要一頁一頁的點選進行檢視更多圖片，而現在的瀑布流佈局使使用者查詢圖片更加方便。
二、瀑布流的優缺點
優點：
1.節省了頁面的空間，不再需要導航和頁碼按鈕。
2.增強了使用者的.體驗，使使用者的體驗更多的是在於瀏覽圖片上，而不是在尋找怎麼找下一頁和切換的操作上。
缺點：
1.使用的網頁型別有限：
這種瀑布流佈局只適用於某些特定型別產品中一部分特定型別的內容。
比如我們在某寶買東西時，我們就需要記住第幾頁的哪個商品是我們想買的，然後再回頭購買，這時候就需要我們的頁面按鈕來幫忙記憶，瀑布流反而更加麻煩。
2.永遠看不到的頁尾：
如果我們使用瀑布流無限滾動載入模式，那就是說我們永遠也無法看到我們的頁尾，當用戶一次次的瀏覽到頁面底部，看到頁尾，卻因為自動載入的內容的突然出現，無論怎樣都無法點選到頁尾中的連結或登入時，那麼使用者的體驗是極為糟糕的，他們可能會憤怒的關掉你的網頁。
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:
<p id="wrap">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</p>
以下是簡單的JS程式碼：
var wrap=ySelector("#wrap");
var ul=ySelectorAll("#wrap ul");//宣告元素塊
//先建立一個隨機數的函式
function ranDom(min,max){
return om()*(max-min+1)+min;
}
//再建立一個新增li的函式
function createLi(num){
for(var i=0;i<num;i++){
var newLi=teElement("li");//建立li
ht=ranDom(100,400)+"px";//使用隨機數函式建立高度不同的li
var arrul=[];
//將ul的高度進行儲存和比較
for(var j=0;j<th;j++){
(ul[j]etHeight);//儲存ul的高度
}
var minHeight=arrul[0];
var minIndex=0;
for(var k=0;k<th;k++){
if(minHeight>arrul[k]){
minHeight=arrul[k];//比較出高度最短的ul然後賦值給minHeight
minIndex=k;//把高度最短的ul所在下標賦值給minIndex
}
}
ul[minIndex]ndChild(newLi);//向高度最短的ul裡新增li
}
}
createLi(15);//執行函式，新增15個li，
//建立一個滾動事件
roll=function(){
// html總高度-視覺化視窗高度=body的滾動高度
//相容寫法
var scrollTop=llTop;
var clientHeight=ntHeight||ntHeight||rHeight;
if(etHeight-clientHeight<=scrollTop){
createLi(15);
}
}
//當滾動快要到達底部,還沒有到達的時候,再去執行函式,建立新的li
這樣我們就實現了永遠也看不到頁尾的自動載入瀑布流佈局。
四、總結
瀑布流簡單來講就是頁面容器內的多個高度不固定的容器之間參差不齊的新增內容，滑鼠滾動時不斷在容器內的尾部載入資料，且自動載入到空缺位置，也就是例子中的高度最短的位置，不斷迴圈。
瀑布流對於圖片的展現，是高效而具有吸引力的，使用者一眼掃過的快速閱讀模式可以在短時間內獲得更多的資訊量,而瀑布流裡自動載入又避免了使用者滑鼠點選的翻頁操作。
瀑布流的主要特性便是錯落有致，定寬而不定高的設計讓頁面區別於傳統的矩陣式圖片佈局模式，巧妙的利用視覺層級，視線的任意流動又緩解了視覺疲勞，同時給人以不拘一格的感覺。
