這是我在做公司官網時候遇到的問題，ui設計圖樣式如下：
問題分析：
首先，看見這個ui設計圖：它呈左右兩列不規則分布，而且也能發現width寬度、heigth高度等都不相同。
思路分析：
毫無疑問，我們用簡單的div布局+css做的話是可以達到這樣的效果的，只是這樣很low，不靈活，而且需要反覆布局排版，**量也不簡單！
此時，這個用瀑布流的話會簡單不少！
原理+實現：
瀑布流：又稱瀑布流式布局，是比較流行的一種**頁面布局方式，能夠提公升使用者的體驗感。它是多行等寬元素排列，等寬不等高或者寬高都不相同，後面的元素依次新增到其後！根據原比例縮放直至寬度達到我們的要求，依次按照規則放入指定位置。
主要知識點：
column-count：這是乙個可以設定將div元素中的文字分成幾列，預設值是：auto；
-moz-column-count:3; /* firefox */
-webkit-column-count:3; /* safari and chrome */
注意：ie9及更早 ie 版本瀏覽器不支援 column-count 屬性 。此時引入另乙個知識點·column-gap，用來調整邊距
html：
class
="step6-waterfull"
>
class
="step6-waterfull-item"
>
src=
"../../../assets/images/home/img_926.png"
alt="
">
div>
class
="step6-waterfull-item"
>
src=
"../../../assets/images/home/img_927.png"
alt="
">
div>
class
="step6-waterfull-item"
>
src=
"../../../assets/images/home/img_928.png"
alt="
">
div>
class
="step6-waterfull-item"
>
src=
"../../../assets/images/home/img_922.png"
alt="
">
div>
class
="step6-waterfull-item"
>
src=
"../../../assets/images/home/img_923.png"
alt="
">
div>
class
="step6-waterfull-item"
>
src=
"../../../assets/images/home/img_924.png"
alt="
">
div>
class
="step6-waterfull-item"
>
src=
"../../../assets/images/home/img_925.png"
alt="
">
div>
div>
css:
.step6-waterfull
}
我這裡用的是純css做的，也可以用js或者外掛程式實現！
補充知識點：
class
="step6-waterfull"
>
class
="step6-waterfull-item"
>
1div
>
class
="step6-waterfull-item"
>
2div
>
class
="step6-waterfull-item"
>
3div
>
class
="step6-waterfull-item"
>
4div
>
class
="step6-waterfull-item"
>
5div
>
class
="step6-waterfull-item"
>
6div
>
class
="step6-waterfull-item"
>
7div
>
class
="step6-waterfull-item"
>
8div
>
class
="step6-waterfull-item"
>
9div
>
class
="step6-waterfull-item"
>
10div
>
class
="step6-waterfull-item"
>
11div
>
div>
效果圖：
可以從圖中看出，瀑布流的排布為從上到下，不是從從左到右這個。知道這點對於布局排版有幫助。
瀑布流布局
最近在看瀑布流布局，覺得很神奇，每個模組都可以找到自己應該在的地方，各列齊頭並進，給人一種很high的感覺。一開始自己也想了思路 模組1，模組2，裡面模組float left。結果試了一下，悲劇啊，不同高度的直接就掛了，布局亂了。等高的還可以。然後我又想分類，就是規定幾列，分別把模組順序載入在各個c...
瀑布流布局
很早以前我就想自己學寫一下瀑布流布局，可是由於懶神來找我聊天咯，所以推遲咯很久直到今天我才來寫瀑布流布局。由於鄙人的js還有很大的提公升空間，所以我是先看咯一下那些大神的具體講解和分析，然後才開始著手寫的，收穫那是槓槓的。1 大家都知道要想實現瀑布流，就必須規定每乙個區塊的寬度要一致 2 確定每一排...
瀑布流布局
mark之，蘑菇街，點點網，以及 最新上線的 哇哦 等等，倒是很流行哈 在 即將上線的眾多產品中，你還會大量看到這樣的形式呢。這種布局適合於小資料塊，每個資料塊內容相近且沒有側重。通常，隨著頁面滾動條向下滾動，這種布局還會不斷載入資料塊並附加至當前尾部。所以，我們給這樣的布局起了乙個形象的名字 瀑布...