前端實現(xiàn)瀑布流的方法很多,其中最簡單的就是用CSS實現(xiàn)，其次是通過jQuery實現(xiàn)，最麻煩的就是js，那么就從最麻煩的開始吧$_$
不管用哪種方法去實現(xiàn)瀑布流效果，html文件里的寫法都是相同的，特別是body里的寫法，簡直是一毛一樣的。先把html里的內(nèi)容粘貼如下：
1.js實現(xiàn)瀑布流效果
不管是什么語言，實現(xiàn)瀑布流效果的基本思路都是一樣的，具體的我就不說了，只聊干貨，上代碼。
下面看下CSS里面的處理，還是直接粘貼代碼如下：
基本的處理搞完了，下面就是最最重要的js處理了。
首先在html文件的head標簽里導入js文件，如下：
<!--引入js代碼-->
<script src="js/index.js"></script>
為了實現(xiàn)瀑布流效果，我們需要把已有的數(shù)據(jù)先按照瀑布流效果排列好，先來一個實現(xiàn)瀑布流的函數(shù)，有詳細的步驟注釋，粘貼如下：
$函數(shù)是自定義的函數(shù)，根據(jù)id獲得標簽
還有一個獲取數(shù)組中特定值的腳標的函數(shù)
在網(wǎng)頁加載完畢的onload函數(shù)中調(diào)用實現(xiàn)瀑布流的函數(shù)，第一個參數(shù)是最外層的div標簽的id="main"，第二個參數(shù)是每個盒子div標簽的類名class=“box”。
下面要考慮加載更多新圖片了，在此就寫成靜態(tài)數(shù)據(jù)進行加載。首先先判斷什么時候加載，我的判斷是，當瀏覽器頁面的偏移量加上瀏覽器的高度大于加載的最后一個盒子的頭部偏移量的時候，加載新的數(shù)據(jù)。實現(xiàn)函數(shù)如下：
判斷過，需要加載數(shù)據(jù)的話，就加載新的數(shù)據(jù)咯
OK，js實現(xiàn)瀑布流效果搞定了。
2.jQuery實現(xiàn)瀑布流效果
首先要保證你有jQuery文件，然后導入jQuery文件，css文件跟js實現(xiàn)瀑布流效果是一樣的，就不重新粘貼一遍了。重點的還是我們自己寫的js實現(xiàn)文件，道理跟js實現(xiàn)是一樣的，所以我連函數(shù)名起得都一樣，不多說，兩個主要的函數(shù)直接粘貼如下：
OK，jQuery實現(xiàn)瀑布流效果搞定了。
3.css實現(xiàn)瀑布流效果
現(xiàn)在可以把前面的都忘掉了，最簡單的實現(xiàn)方式來了。這個是沒有js文件的，只需要修改css文件就行，直接粘貼代碼：
OK，css實現(xiàn)瀑布流效果搞定了。
納尼？就三行？對，就三行！這三行堪比三行情書?。?！
效果圖如下：
