最近在看瀑布流布局，覺得很神奇，每個模組都可以找到自己應該在的地方，各列齊頭並進，給人一種很high的感覺。
一開始自己也想了思路：
模組1，模組2，。。。
。裡面模組float：left。結果試了一下，悲劇啊，不同高度的直接就掛了，布局亂了。等高的還可以。
然後我又想分類，就是規定幾列，分別把模組順序載入在各個container中。但是這樣會出現有些列很高，有些列很矮。
實在沒有辦法就去網上搜尋了一下。還是有很多前輩都總結了。我也去學習了一下先進的經驗。
覺得動態的計算各個模組的位置這個方法還可以。
流程：1、計算列數
2、第一行順序寫入並記錄各列的高度（全部陣列中）。
3、下乙個加在列高最低的位置。
4、滾動到該重新整理的位置時，把新的模組加入頁面中（第三步）。
瀑布流布局
很早以前我就想自己學寫一下瀑布流布局，可是由於懶神來找我聊天咯，所以推遲咯很久直到今天我才來寫瀑布流布局。由於鄙人的js還有很大的提公升空間，所以我是先看咯一下那些大神的具體講解和分析，然後才開始著手寫的，收穫那是槓槓的。1 大家都知道要想實現瀑布流，就必須規定每乙個區塊的寬度要一致 2 確定每一排...
瀑布流布局
mark之，蘑菇街，點點網，以及 最新上線的 哇哦 等等，倒是很流行哈 在 即將上線的眾多產品中，你還會大量看到這樣的形式呢。這種布局適合於小資料塊，每個資料塊內容相近且沒有側重。通常，隨著頁面滾動條向下滾動，這種布局還會不斷載入資料塊並附加至當前尾部。所以，我們給這樣的布局起了乙個形象的名字 瀑布...
瀑布流布局
flex 實現瀑布流需要將最外層元素設定為 display flex，即橫向排列。然後通過設定 flex flow column wrap 使其換行。設定 height 100vh 填充螢幕的高度，來容納子元素。每一列的寬度可用 calc 函式來設定，即 width calc 100 3 20px ...