- 相關(guān)推薦
如何使用javascript實(shí)現(xiàn)瀑布流及效果加載
導(dǎo)語(yǔ)：瀑布流，是比較流行的一種網(wǎng)站頁(yè)面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部，下面小編給大家提供的是如何使用javascript實(shí)現(xiàn)瀑布流及效果加載，更多詳情請(qǐng)關(guān)注應(yīng)屆畢業(yè)生考試網(wǎng)。
一、瀑布流是個(gè)啥?
瀑布流，是比較流行的一種網(wǎng)站頁(yè)面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。
最早采用瀑布流布局的網(wǎng)站是Pinterest，逐漸在國(guó)內(nèi)流行開來(lái)，比如我們熟知的百度圖片的布局，在“很久”以前，百度圖片還是需要一頁(yè)一頁(yè)的點(diǎn)擊進(jìn)行查看更多圖片，而現(xiàn)在的瀑布流布局使用戶查找圖片更加方便。
二、瀑布流的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：
1.節(jié)省了頁(yè)面的空間，不再需要導(dǎo)航和頁(yè)碼按鈕。
2.增強(qiáng)了用戶的體驗(yàn)，使用戶的體驗(yàn)更多的是在于瀏覽圖片上，而不是在尋找怎么找下一頁(yè)和切換的操作上。
缺點(diǎn)：
1.使用的網(wǎng)頁(yè)類型有限：
這種瀑布流布局只適用于某些特定類型產(chǎn)品中一部分特定類型的內(nèi)容。
比如我們?cè)谀硨氋I東西時(shí)，我們就需要記住第幾頁(yè)的哪個(gè)商品是我們想買的，然后再回頭購(gòu)買，這時(shí)候就需要我們的頁(yè)面按鈕來(lái)幫忙記憶，瀑布流反而更加麻煩。
2.永遠(yuǎn)看不到的頁(yè)腳：
如果我們使用瀑布流無(wú)限滾動(dòng)加載模式，那就是說(shuō)我們永遠(yuǎn)也無(wú)法看到我們的頁(yè)腳，當(dāng)用戶一次次的瀏覽到頁(yè)面底部，看到頁(yè)腳，卻因?yàn)樽詣?dòng)加載的內(nèi)容的突然出現(xiàn)，無(wú)論怎樣都無(wú)法點(diǎn)擊到頁(yè)腳中的鏈接或登錄時(shí)，那么用戶的體驗(yàn)是極為糟糕的，他們可能會(huì)憤怒的關(guān)掉你的網(wǎng)頁(yè)。
3.關(guān)于頁(yè)面數(shù)量：
對(duì)于用戶來(lái)說(shuō)，使用瀑布流自動(dòng)加載來(lái)替代傳統(tǒng)的換頁(yè)其實(shí)是很方便的，而對(duì)于開發(fā)者的網(wǎng)站來(lái)說(shuō)，頁(yè)面的減少可能就無(wú)法展示更多地相關(guān)信息，最明顯的就是廣告減少。
三、瀑布流寫法及原理
瀑布流到底長(zhǎng)什么樣子呢，那我們現(xiàn)在就來(lái)默寫一個(gè)簡(jiǎ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:
<p id="wrap">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</p>
以下是簡(jiǎn)單的JS代碼：
var wrap=document.querySelector("#wrap");
var ul=document.querySelectorAll("#wrap ul");//聲明元素塊
//先創(chuàng)建一個(gè)隨機(jī)數(shù)的函數(shù)
function ranDom(min,max){
return Math.random()*(max-min+1)+min;
}
//再創(chuàng)建一個(gè)添加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";//使用隨機(jī)數(shù)函數(shù)創(chuàng)建高度不同的li
var arrul=[];
//將ul的高度進(jìn)行儲(chǔ)存和比較
for(var j=0;j<ul.length;j++){
arrul.push(ul[j].offsetHeight);//儲(chǔ)存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個(gè)li，
//創(chuàng)建一個(gè)滾動(dòng)事件
window.onscroll=function(){
// html總高度-可視化窗口高度=body的滾動(dòng)高度
//兼容寫法
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òng)快要到達(dá)底部,還沒有到達(dá)的時(shí)候,再去執(zhí)行函數(shù),創(chuàng)建新的li
這樣我們就實(shí)現(xiàn)了永遠(yuǎn)也看不到頁(yè)腳的自動(dòng)加載瀑布流布局。
四、總結(jié)
瀑布流簡(jiǎn)單來(lái)講就是頁(yè)面容器內(nèi)的多個(gè)高度不固定的容器之間參差不齊的添加內(nèi)容，鼠標(biāo)滾動(dòng)時(shí)不斷在容器內(nèi)的尾部加載數(shù)據(jù)，且自動(dòng)加載到空缺位置，也就是例子中的高度最短的位置，不斷循環(huán)。
瀑布流對(duì)于圖片的展現(xiàn)，是高效而具有吸引力的，用戶一眼掃過(guò)的快速閱讀模式可以在短時(shí)間內(nèi)獲得更多的信息量,而瀑布流里自動(dòng)加載又避免了用戶鼠標(biāo)點(diǎn)擊的翻頁(yè)操作。
瀑布流的主要特性便是錯(cuò)落有致，定寬而不定高的設(shè)計(jì)讓頁(yè)面區(qū)別于傳統(tǒng)的矩陣式圖片布局模式，巧妙的利用視覺層級(jí)，視線的任意流動(dòng)又緩解了視覺疲勞，同時(shí)給人以不拘一格的感覺。
【如何使用javascript實(shí)現(xiàn)瀑布流及效果加載】相關(guān)文章：
如何使用JavaScript實(shí)現(xiàn)頁(yè)面定時(shí)跳轉(zhuǎn)04-02
如何使用JavaScript實(shí)現(xiàn)倒計(jì)時(shí)03-02
如何實(shí)現(xiàn)JavaScript的DIV塊來(lái)回滾動(dòng)效果06-30
如何使用JavaScript實(shí)現(xiàn)香港身份格式及真?zhèn)涡则?yàn)證05-20
JavaScript簡(jiǎn)單實(shí)現(xiàn)放大鏡效果代碼02-21
JavaScript如何實(shí)現(xiàn)JSON.stringify03-07
如何使用JS實(shí)現(xiàn)PC端移動(dòng)端的刮卡效果03-02