豎向瀑布流布局解析！

瀑布流是各種桌布社群喜歡用的布局效果，精品的隨著滾動條的下拉一張張從渲染出來，非常的好看。

作為一名前端工程師，我們工作中可能會遇到類似的這種需求，今天我就給大家剖析下瀑布流的整體思路。

因為這種效果可能牽扯到具體的公司需求，容器大約多少列、這種都不能統一，所以今天給大家分享下4列的設計原理，大家可以將這種程式設計的思路靈活的運用到自己的實際工作中。

當我們從後端傳送ajax請求的時候，拼接完html結構(如果有同學喜歡原生的話，建議使用建立dom元素的方式，下面到時會解釋!)，我們渲染所有結構，的高度肯定時錯來，這個時候我們需要定時乙個方法重新排列的位置。

這個方法我們首先需要先將第一行四個容器渲染出來。

下面是第一行渲染的效果。

我們有了這四個固定位置的那就好辦了，我們建立乙個陣列，將第一行的高度存起來（這裡需要注意，是通過後端請求過來的資料，是需要時間來載入的，哪怕是在成功請求之後，依然是無法獲取高度的，我們可以通過給標籤設定自定義屬性來記錄後端儲存的高度）。

陣列格式[ img1.height, img2.height, img3.height, img4.height ]

理想情況下是，除過前4張的，後面的一次尋找最短的高度，插入到空位中，這裡起始也就是瀑布流布局的核心了，大家注意，看到問題首相要學會聯想和發散思維，如何「尋找最短的高度」？

這時候我們回想下，我們在處理第一行的時候說了，第一行的由於是固定，所以我們可以在他的身上做手腳。

這個時候我們找到剛才的第一行的高度陣列 [ img1.height, img2.height, img3.height, img4.height ] 找出最下的那個數字，這樣我們不就解決了「如何尋找最短的高度」的問題。

既然我們能拿到正確的高度，那我們就可以處理後面的布局了，我們給後面的加上絕對定位，設定top為最短高度。

全疊到一起了，因為現在只是初步解決了top的高度問題，還有left的問題沒有解決，相信大家也都能理解，第一行4列，以後沒行也都是4列，並且通過上面的高度陣列，我們可以正確的查詢到最短的高度在那一列（第三列，對應的索引為2），我們用索引*單個容器加間隔，就可以正確的得到最短高度，最短高度所在列。

哎，不是正確了嗎？怎麼還堆到一起了？

大家像乙個問題，雖然說，我們每次都是操作的陣列的最小的高度，但是沒有記錄下來這值的改變，又如何能正確排列呢，所以每次我們都要記錄最短高度的改變，所以通過陣列最小下標的索引，將最小高度賦值為最小高度+本次填充的的高度，這樣不斷的迴圈，就能得到正常的瀑布流布局效果。

高度陣列:[200,400,100,150]、第二行高度為100,200,300,400、寬度都為100，間隔為10

第5次迴圈：

第6次迴圈：

第7次迴圈：

上面提到了為什麼使用dom造作是因為:如果使用了字串拼接的話，從後端請求的資料會覆蓋原理的html結構，不會忘容器的後面追加。

相信大家看到這裡基本上都明白了，原理了，當然這只是完成了一部分，還有乙個核心就是，在滾動到底的時候，如何控制呼叫次數，這裡給大家乙個大方向的思路，函式的節流與去抖，以及使用狀態變數，下次有機會了，再給大家分享我的思路！