JS實(shí)現(xiàn)原理

其實(shí)瀑布式主要的難點(diǎn)就在于，如果將圖片整齊的排列在對(duì)應(yīng)的列下，以及什么時(shí)候開始刷新加載圖片。
而圖片整齊的排列的主要邏輯和算法即，先獲取容器內(nèi)可以放多少列，然后，通過計(jì)算，存放第一列的高度，再遍歷剩下(除第一列的元素)的高度，分別放入，高度最小的那一列。 逐個(gè)添加，最后結(jié)束遍歷。
開始刷新的設(shè)置就很簡(jiǎn)單了，瀑布流刷新只和一個(gè)事件有關(guān)，即，window.onscroll. 主要的算法即，當(dāng)頁面滑動(dòng)到最低高度的時(shí)候開始加載節(jié)點(diǎn)并且添加，當(dāng)然，節(jié)點(diǎn)添加的個(gè)數(shù)是不固定的。
先上代碼吧，我這里分3部分講解，一個(gè)是圖片的排列，一個(gè)是設(shè)置加載的位置.另外再補(bǔ)充一個(gè)響應(yīng)式加載。

1、圖片排列

里面一共有7個(gè)函數(shù)(大函數(shù)),一個(gè)變量。 說一下思路吧。 首先，頁面onload之后 執(zhí)行的函數(shù)是 init. 要知道，一個(gè)js程序一定有他的入口，關(guān)鍵看你怎么找了。 然后我們深入init函數(shù)體，觀察。init里面執(zhí)行的業(yè)務(wù)邏輯就是 存儲(chǔ)第一排元素的高度，然后重排剩下的元素。 通過columns函數(shù)來獲得當(dāng)前窗口最多可以放下多少列，然后設(shè)置容器的居中(通過padding設(shè)置即可). 接下來，遍歷pin的單元框，將第一排的元素高度存放在arrHeight數(shù)組里，將剩下的元素進(jìn)行重排。 其他的函數(shù)覺得沒什么講解的必要了。 我們著重來看一下overLoad函數(shù).
2、overLoad

在overLoad里面有g(shù)etIndex函數(shù)，獲取最小高度的index,然后就可以設(shè)置傳入進(jìn)來的ele元素的位置(絕對(duì)定位), top為數(shù)組中最小高度的px值，left就為第一排制定的Index元素的左邊距位置。 最后更新一下高度，ok!!! that's enough.
3、設(shè)置加載位置

其實(shí)，精華就在上一部分，這個(gè)只是作為一個(gè)加載數(shù)據(jù)的手段，當(dāng)然，你可以點(diǎn)擊加載(手動(dòng)觸發(fā))，或者其他的加載方法。 當(dāng)然，怎么設(shè)置完全是取決于你的。 所以，隨大流，依然是通過下滑滾動(dòng)加載。 繼續(xù)，找入口函數(shù)->dealScroll. 該函數(shù)執(zhí)行的任務(wù)就是，通過isload函數(shù),判斷是否可以進(jìn)行加載判斷。 我們看一下isload函數(shù)，這個(gè)就是滾動(dòng)加載的關(guān)鍵點(diǎn).

通過計(jì)算得出，頁面底部距視口的位置(工具條下部) 與 最后一個(gè)元素的絕對(duì)位置比較，如果 滑動(dòng)距離超過，則啟用加載。
yeah~ That's over.
back to dealScroll
接下來就是看加載的部分了，這個(gè)部分其實(shí)也沒什么說的，就是創(chuàng)建一個(gè)div節(jié)點(diǎn)，然后將他放到容器的最后，并且通過overLoad函數(shù)來處理該節(jié)點(diǎn)的位置。 另外在該函數(shù)的末尾，我設(shè)置了一個(gè)控制滑動(dòng)速度的trick,通過對(duì)函數(shù)的節(jié)流，防止有時(shí)候，請(qǐng)求過慢，用戶重復(fù)發(fā)送請(qǐng)求，造成資源浪費(fèi)。
然后，這一部分也可以告一段落了。
4、響應(yīng)式
最后一部分就是響應(yīng)式了， 這部分，也超級(jí)簡(jiǎn)單，只要你封裝性做的好，其實(shí)這一部分就是添加一個(gè)resize事件就over了。我們繼續(xù)找入口函數(shù)。

同樣，這里使用到了函數(shù)節(jié)流的思想，要知道，作為一個(gè)程序員，永遠(yuǎn)不要以為 用戶 干不出什么 傻事. 比如，沒事的時(shí)候拖著瀏覽器窗口玩，放大，縮小，再放大... 其實(shí)，這事我經(jīng)常干，因?yàn)闆]有女朋友，寫代碼寫累了，就拖瀏覽器玩。 所以，考慮到我們單身狗的需求，使用函數(shù)節(jié)流是非常有必要的。 感興趣的童鞋，可以參考我前面的文章，進(jìn)行學(xué)習(xí)。 說明一下，這里的回調(diào)函數(shù)指的就是init函數(shù)，但是 需要對(duì)init做些改動(dòng)。詳見。

上面需要加入update,對(duì)新的第一排元素進(jìn)行更新。
然后就可以直接搬過來使用即可。
這就是絕對(duì)是布局的大部分內(nèi)容了，關(guān)于javascript瀑布流另一種布局方式請(qǐng)參考下一篇文章《詳解javascript實(shí)現(xiàn)瀑布流列式布局》。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com