? ? ? ?瀑布流這項技術(shù)在現(xiàn)在很流行檩奠，各大網(wǎng)站桩了，特別是關(guān)于的圖片的網(wǎng)站都在利用這項技術(shù)來進(jìn)行圖片的布局附帽，來吸引客戶的眼球。像蘑菇街井誉，圖庫蕉扮，美麗說，等等颗圣。首先是喳钟，我們要理解瀑布流的技術(shù)原理。

?問：什么是瀑布流技術(shù)在岂？

答：瀑布流技術(shù)是關(guān)于圖片的加載的技術(shù)奔则，響應(yīng)式的加載。什么是響應(yīng)式的加載呢蔽午？就是根據(jù)不同的視圖窗口的尺寸易茬，而來匹配不同的css樣式，進(jìn)行不同的樣式匹配及老。專業(yè)的來講抽莱，就是我前端開發(fā)師在頁面的設(shè)計，是要根據(jù)用戶的行為骄恶，不同的設(shè)備（屏幕的尺寸食铐，分辨率，屏幕的定向）來進(jìn)行不同的布局叠蝇，需要不斷的調(diào)整和響應(yīng)璃岳。我們學(xué)過不同的布局框架，像柵格系統(tǒng)就是基于響應(yīng)式布局的悔捶。在網(wǎng)頁的圖片加載的過程中，我們不是在頁面的加載的時候单芜，就把圖片加載完了蜕该，這樣，會耗費(fèi)用戶的流量洲鸠，降低客戶的體驗度的堂淡。

問：既然如此，我們應(yīng)該怎么辦呢扒腕，怎樣提高用戶的體驗度?

答 ： 我們可以利用響應(yīng)式的理念绢淀。就是用戶在瀏覽圖片的時候，我們可以設(shè)計響應(yīng)式的瀏覽體驗瘾腰，也就是說皆的，我們可以根據(jù)用戶的觀看視圖窗口來進(jìn)行加載需要的瀏覽的圖片。就是根據(jù)用戶的下拉滾動條蹋盆，也就是說费薄，我們可以監(jiān)聽onscroll事件來進(jìn)行判斷用戶的是否有需求來進(jìn)行觀看圖片硝全。這個事件是響應(yīng)式加載的關(guān)鍵。也就是說楞抡，我們圖片的容器加上卷起來的距離的大于視圖窗口的距離時伟众，我們就觸發(fā)onscroll事件。也就是說召廷，就發(fā)起請求加載圖片的事件凳厢。是ajax或者是跨域的請求。這樣竞慢，就做到響應(yīng)式的圖片的加載功能的先紫。根據(jù)不同的瀏覽距離就可以加載不同的圖片。當(dāng)然梗顺，我們還有把加載下來的數(shù)據(jù)push到原來的數(shù)據(jù)庫中泡孩，這樣，就加載不同的數(shù)據(jù)了寺谤。

問 ： 瀑布流的尺寸仑鸥，排列的方式是怎么樣實現(xiàn)的？

答 ：有兩種方案变屁。我們先看第一種方案眼俊，就是按照位置的計算方法來進(jìn)行的。思路是這樣的：把瀑布流的看做 列 容器 格子 粟关，如圖所示：

首先疮胖，我們要計算我們的容器要容下幾列瀑布流，這個要根據(jù)我們的容器的寬度闷板，來進(jìn)行計算：計算方法澎灸，如圖所示：

1 ： 容納的列數(shù)： 是要根據(jù)我們的屏幕的（也就是可視窗口的寬度/（格子的寬度+間距））；然后遮晚，向下取整性昭，這樣，計算的結(jié)果就是我們要的是容納的列數(shù)县遣。這樣糜颠，在不同的設(shè)備下，我們要計算出的容納的列數(shù)萧求。

2 ：容器的居中問題：為了保證我們的容器居中其兴，我們還要計算的是容器的寬度：就是我們要將容器的寬度設(shè)置為：列數(shù)*（格子寬度+間距）-間距； 這樣夸政，我們可以保證我們的容器居中了元旬。一行有幾列，然后，乘以（格子的寬度 + 間距） 這個是總間距法绵，然后減去間距箕速，就可以讓容器的居中。這樣朋譬，就提高用戶的美觀盐茎。需要注意的是，當(dāng)容器的寬度計算出來的時候徙赢，我們在代碼執(zhí)行順序的時候字柠，要在顯示。如果狡赐，要顯示窑业，再計算的話是，會產(chǎn)生的頁面的抖動枕屉。造成頁面的體驗不好常柄。

3 ： 排序的開始： 先把列數(shù)的每個格子放進(jìn)每個列中，然后搀擂，去尋找的每個列數(shù)的高度最小的列數(shù)西潘，然后，把格子放進(jìn)去哨颂，這樣喷市，我們就能及時把空白的地方補(bǔ)上。left 的值是：列序號*（格子的寬度+間距）top : ?列高 + 間距威恼；并刷新的高度品姓。怎么樣找到高度最短的列數(shù)？就是可以通過for循環(huán)來進(jìn)行遍歷所有的列數(shù)箫措，來判斷最小的高度腹备。遍歷所有的格子，然后斤蔓，直達(dá)重新排序馏谨。

4：把事件操作都掛載window.onload 和 window.onresize上，這樣附迷，我們的瀑布流的頁面效果就出來了。

問 ： 這樣的思路有沒有什么弊端哎媚？

答 ：這樣的設(shè)計看起來很美好喇伯，但是，結(jié)合異步的數(shù)據(jù)加載時拨与，還有幾個弊端的稻据。弊端的問題如下：

問 ： 有沒有解決的方案呢？

答 ：　 ?有的，因為主要是消耗計算機(jī)的性能捻悯，每當(dāng)縮放窗口的時匆赃，都會觸發(fā)事件。在縮放的時候今缚，還有進(jìn)行重新排序算柳。這樣，就大量的消耗性能姓言，頁面滾動到底部的時候瞬项，需要發(fā)起請求數(shù)據(jù)，但是何荚，只會照成新增的節(jié)點排序囱淋。解決方案是可以通過定時器來進(jìn)行感知窗口的尺寸變化，如果一直在變化的話餐塘，就不必的觸發(fā)請求的事件妥衣，這樣，就不必的耗損計算機(jī)的性能戒傻。代碼如下：

? ? ?也就是說税手，通過定時器的監(jiān)聽的話，我們可以降低計算機(jī)的運(yùn)行耗能稠鼻。 也就是說冈止，當(dāng)resize的值大于100的時候，清除定時器的效果候齿。然后熙暴，是在窗口的變化的時候，我們可以啟動的我們的定時器的慌盯。

2 ： 如果每一次的數(shù)據(jù)的加載的時候周霉，我們都會重新排序，這樣亚皂，就比較耗損性能俱箱，我們的結(jié)局方案是，用一個數(shù)組來保存整個全局?jǐn)?shù)據(jù)灭必，然后狞谱，就可以直接調(diào)用排序的計算方法，在數(shù)據(jù)的加載時候禁漓，這樣的話跟衅，就不必的重新要排序了。

-------------------------------------------------------------------------------------------->

用面向?qū)ο蟮乃枷雽懫俨剂鞑ゼ摺４a如下：

這個源碼是非常不錯的伶跷。我們可以了解一下。