今天來說說頁面的瀑布式刷新方法剪个。實現(xiàn)的是一個照片墻效果，然后隨著右邊滾動條的拉動版确，圖片不斷刷新出來扣囊，永遠也拉不到底乎折。
要實現(xiàn)這種效果，我們可以分為兩個步驟侵歇，先實現(xiàn)照片墻骂澄，自動布局效果，然后再實現(xiàn)下拉刷新效果惕虑。
照片墻
新建一個頁面坟冲，我們先添加一些圖片內(nèi)容。
參考上圖依次添加溃蔫，我這里添加了15個健提。
由于現(xiàn)在我們沒有加任何效果，所以圖片是依次往下顯示的伟叛，而且每張圖片的大小也不一樣矩桂。
所以，我們先給圖片添加一些樣式痪伦。
很簡單的一段代碼侄榴，先給容器設置相對布局，然后給圖片固定長度网沾，同時添加一點陰影效果癞蚕，稍微美化一下。
這樣做出來的效果是不會自動布局的辉哥，而且也不具備響應式效果桦山。（即頁面大小改變時，布局也跟著改變）
所以醋旦，我們需要通過JS來實現(xiàn)恒水。（我們先來理一下思路）
之所以頁面不具備響應式是因為，當頁面寬度改變的時候饲齐，我們的容器也跟著頁面改變钉凌，而圖片的大小是固定的，所以我們的頁面布局也會發(fā)生改變捂人。
因此御雕，我們只需要動態(tài)的設置容器的寬度。
接下去滥搭，我們要找到第一行中酸纲，高度最低的那張圖片，然后把后面的圖片放到那里去瑟匆。
現(xiàn)在已經(jīng)完成了圖片的自動布局和響應式功能闽坡，我們來看看效果。
圖片已經(jīng)實現(xiàn)了自動布局。
- 瀑布式下拉效果
我們也先來理一下思路疾嗅。想要實現(xiàn)下拉刷新外厂，得在滾輪快要拉到底部的時候，給他動態(tài)加載新的圖片宪迟。
那么，怎么判斷頁面快要到底部了呢交惯？
我們先來獲得幾個高度次泽。
我們在頁面上測試一下。在我輕輕的拉動的時候席爽，三個參數(shù)的高度情況意荤。（last_contentheight：scrolltop：pageheight);
所以，我們可以做出如下判斷只锻。
當條件達到的時候玖像，我們需要動態(tài)的加載圖片。
圖片的數(shù)據(jù)這里是模擬的json數(shù)據(jù)齐饮。
我們看一下完整代碼
