快捷導(dǎo)航

JavaScript實現(xiàn)瀑布流以及加載效果

更新時間：2017年02月11日 12:29:19 作者：Rh九尾魚

這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)瀑布流以及加載效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、瀑布流是個啥？

　　瀑布流，是比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。

　　最早采用瀑布流布局的網(wǎng)站是Pinterest，逐漸在國內(nèi)流行開來，比如我們熟知的百度圖片的布局，在“很久”以前，百度圖片還是需要一頁一頁的點擊進(jìn)行查看更多圖片，而現(xiàn)在的瀑布流布局使用戶查找圖片更加方便。

二、瀑布流的優(yōu)缺點

優(yōu)點：

1.節(jié)省了頁面的空間，不再需要導(dǎo)航和頁碼按鈕。

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

缺點：

1.使用的網(wǎng)頁類型有限：

　　這種瀑布流布局只適用于某些特定類型產(chǎn)品中一部分特定類型的內(nèi)容。

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

2.永遠(yuǎn)看不到的頁腳：

　　如果我們使用瀑布流無限滾動加載模式，那就是說我們永遠(yuǎn)也無法看到我們的頁腳，當(dāng)用戶一次次的瀏覽到頁面底部，看到頁腳，卻因為自動加載的內(nèi)容的突然出現(xiàn)，無論怎樣都無法點擊到頁腳中的鏈接或登錄時，那么用戶的體驗是極為糟糕的，他們可能會憤怒的關(guān)掉你的網(wǎng)頁。

3.關(guān)于頁面數(shù)量：

　　對于用戶來說，使用瀑布流自動加載來替代傳統(tǒng)的換頁其實是很方便的，而對于開發(fā)者的網(wǎng)站來說，頁面的減少可能就無法展示更多地相關(guān)信息，最明顯的就是廣告減少。

三、瀑布流寫法及原理

瀑布流到底長什么樣子呢，那我們現(xiàn)在就來默寫一個簡單的瀑布流布局。先把亂七八糟的基礎(chǔ)樣式和布局稍微的敲一下~這里我們?yōu)榱斯?jié)省空間，就不縮進(jìn)啦~

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");//聲明元素塊
//先創(chuàng)建一個隨機數(shù)的函數(shù)
function ranDom(min,max){
 return Math.random()*(max-min+1)+min;
}
//再創(chuàng)建一個添加li的函數(shù)
function createLi(num){
 for(var i=0;i<num;i++){
  var newLi=document.createElement("li");//創(chuàng)建li
  newLi.style.height=ranDom(100,400)+"px";//使用隨機數(shù)函數(shù)創(chuàng)建高度不同的li
  var arrul=[];
//將ul的高度進(jìn)行儲存和比較
  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所在下標(biāo)賦值給minIndex
   }
  }
 ul[minIndex].appendChild(newLi);//向高度最短的ul里添加li
 } 
}
createLi(15);//執(zhí)行函數(shù)，添加15個li，
//創(chuàng)建一個滾動事件
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); 
 } 
}
//當(dāng)滾動快要到達(dá)底部,還沒有到達(dá)的時候,再去執(zhí)行函數(shù),創(chuàng)建新的li

這樣我們就實現(xiàn)了永遠(yuǎn)也看不到頁腳的自動加載瀑布流布局。

四、總結(jié)

　　瀑布流簡單來講就是頁面容器內(nèi)的多個高度不固定的容器之間參差不齊的添加內(nèi)容，鼠標(biāo)滾動時不斷在容器內(nèi)的尾部加載數(shù)據(jù)，且自動加載到空缺位置，也就是例子中的高度最短的位置，不斷循環(huán)。

　　瀑布流對于圖片的展現(xiàn)，是高效而具有吸引力的，用戶一眼掃過的快速閱讀模式可以在短時間內(nèi)獲得更多的信息量,而瀑布流里自動加載又避免了用戶鼠標(biāo)點擊的翻頁操作。

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: