很早以前我就想自己學寫一下瀑布流布局，可是由於懶神來找我聊天咯，所以推遲咯很久直到今天我才來寫瀑布流布局。由於鄙人的js還有很大的提公升空間，所以我是先看咯一下那些大神的具體講解和分析，然後才開始著手寫的，收穫那是槓槓的。
1、大家都知道要想實現瀑布流，就必須規定每乙個區塊的寬度要一致
2、確定每一排要放置多少列（容器的寬度/
區塊的寬度 然後用
math.floor
向下取整數）
3、容器第一排放置的所有區塊具體頂部都是一樣的距離（距離左面的距離就是他的索引*
區塊的offsetwidth）
4、然後尋找高度最低的區塊位置，然後下面接著開始放置區塊
5、除了第一排的距離頂部是相同的，第二排開始區塊的絕對定位，top
值為它上
i個區塊的高度
+margin值，
具體的效果圖如下：
具體**如下所示（裡面包括咯具體的注釋說明）：
如果裡面還可以修改的更完美的話，請大神賜教，謝謝！
瀑布流布局
最近在看瀑布流布局，覺得很神奇，每個模組都可以找到自己應該在的地方，各列齊頭並進，給人一種很high的感覺。一開始自己也想了思路 模組1，模組2，裡面模組float left。結果試了一下，悲劇啊，不同高度的直接就掛了，布局亂了。等高的還可以。然後我又想分類，就是規定幾列，分別把模組順序載入在各個c...
瀑布流布局
mark之，蘑菇街，點點網，以及 最新上線的 哇哦 等等，倒是很流行哈 在 即將上線的眾多產品中，你還會大量看到這樣的形式呢。這種布局適合於小資料塊，每個資料塊內容相近且沒有側重。通常，隨著頁面滾動條向下滾動，這種布局還會不斷載入資料塊並附加至當前尾部。所以，我們給這樣的布局起了乙個形象的名字 瀑布...
瀑布流布局
flex 實現瀑布流需要將最外層元素設定為 display flex，即橫向排列。然後通過設定 flex flow column wrap 使其換行。設定 height 100vh 填充螢幕的高度，來容納子元素。每一列的寬度可用 calc 函式來設定，即 width calc 100 3 20px ...