前端實現瀑布流的方法很多,其中最簡單的就是用CSS實現，其次是通過jQuery實現，最麻煩的就是js，那麼就從最麻煩的開始吧$_$

不管用哪種方法去實現瀑布流效果，html檔案裡的寫法都是相同的，特別是body裡的寫法，簡直是一毛一樣的。先把html裡的內容貼上如下：

html檔案

1.js實現瀑布流效果

不管是什麼語言，實現瀑布流效果的基本思路都是一樣的，具體的我就不說了，只聊乾貨，上程式碼。

下面看下CSS裡面的處理，還是直接貼上程式碼如下：

css檔案

基本的處理搞完了，下面就是最最重要的js處理了。

首先在html檔案的head標籤裡匯入js檔案，如下：

<!--引入js程式碼-->

<script src="js/index.js"></script>

為了實現瀑布流效果，我們需要把已有的資料先按照瀑布流效果排列好，先來一個實現瀑布流的函式，有詳細的步驟註釋，貼上如下：

實現瀑布流的函式

$函式是自定義的函式，根據id獲得標籤

$函式

還有一個獲取陣列中特定值的腳標的函式

獲取腳標

在網頁載入完畢的onload函式中呼叫實現瀑布流的函式，第一個引數是最外層的div標籤的id="main"，第二個引數是每個盒子div標籤的類名class=“box”。

下面要考慮載入更多新圖片了，在此就寫成靜態資料進行載入。首先先判斷什麼時候載入，我的判斷是，當瀏覽器頁面的偏移量加上瀏覽器的高度大於載入的最後一個盒子的頭部偏移量的時候，載入新的資料。實現函式如下：

判斷是否載入的函式

判斷過，需要載入資料的話，就載入新的資料咯

載入資料

OK，js實現瀑布流效果搞定了。

2.jQuery實現瀑布流效果

首先要保證你有jQuery檔案，然後匯入jQuery檔案，css檔案跟js實現瀑布流效果是一樣的，就不重新貼上一遍了。重點的還是我們自己寫的js實現檔案，道理跟js實現是一樣的，所以我連函式名起得都一樣，不多說，兩個主要的函式直接貼上如下：

實現瀑布流函式

判斷是否載入的函式

載入資料

OK，jQuery實現瀑布流效果搞定了。

3.css實現瀑布流效果

現在可以把前面的都忘掉了，最簡單的實現方式來了。這個是沒有js檔案的，只需要修改css檔案就行，直接貼上程式碼：

css檔案

OK，css實現瀑布流效果搞定了。

納尼？就三行？對，就三行，就是這麼變態！這三行堪比三行情書！！！

效果圖如下：

效果圖