假如您常常網上沖浪，如許亂七八糟的多欄結構，是否是很眼生啊?

　　相似的結構，好像一夜之間湧現正在海內中年夜年夜小小的網站上，好比 Pinterest (貌似是最早應用這類結構的網站瞭)，Mark之，蘑菇街，面面網，和淘寶最新上線的哇哦 等等，卻是很風行哈~ 正在淘寶馬上上線的浩瀚產物中，您借會年夜量看到如許的情勢呢。

　　這類結構合適於小數據塊，每一個數據塊內容鄰近且出有著重。平日，跟著頁裡轉動條背下轉動，這類結構借會賡續減載數據塊並附減至當前尾部。以是，我們給如許的結構起瞭一個形象的名字 — 瀑佈流式結構。

　　

　　幾種真現方法

　　跟著愈來愈多計劃師愛用這類結構，我們做為前端，要盡量知足視覺/交互計劃師的需供。以是，我們整頓瞭下這類結構的幾種真現方法，有三種:

　　1) 傳統多列浮動。即 蘑菇街戰哇哦 采取的方法，以下圖所示:

　　

　　各列牢固寬度，而且左浮動;

　　一列中的數據塊為一組，列中的每一個數據塊順次分列便可;

　　更多半據減載時，須要分離插進到分歧的列上;

　　線上例子。

　　長處:

　　結構簡略，應當道出啥特殊的易面;

　　不消明白曉得數據塊下度，當數據塊中有圖片時，便沒有須要指定圖片下度。

　　缺陷:

　　列數牢固，擴大不容易，當閱讀器窗心年夜小變更時，隻能牢固的x列，假如要增加一列，很易調劑數據塊的分列;

　　轉動減載更多半據時，借要指定插進到第幾列中，照樣沒有便利。

　　2) CSS3 界說。W3C 中有報告閉於多列結構的文檔，分列出去的模樣:

　　

　　由 chrome/ff 閱讀器間接襯著出去，能夠指定容器的列個數，列間距，列中央邊框，列寬度去真現;

#container {
-webkit-column-count: 5；
/*-webkit-column-gap: 10px；
-webkit-column-rule: 5px solid #333；
-webkit-column-width: 210px；*/

-moz-column-count: 5；
/*-moz-column-gap: 20px；
-moz-column-rule: 5px solid #333；
-moz-column-width: 210px；*/

column-count: 5；
/*column-gap: 10px；
column-rule: 5px solid #333；
column-width: 210px；*/
}

　　column-count 為列數; column-gap 為每列距離間隔; column-rule 為距離邊線年夜小; column-width 為每列寬度; 當隻設置 column-width 時，閱讀器窗心小於一列寬度時，列中內容主動隱蔽; 當隻設置 column-count 時，均勻盤算每列寬度，列內內容超越則隱蔽; 皆設瞭 column-count 戰column-width，閱讀器會依據 count 盤算寬度戰 width 比擬，與年夜的誰人值做為每列寬度，然後當窗心縮小時，width 的值為每列最小寬度。那邊實在很簡略，簡略單純本身測驗考試下，具體可參考https://developer.mozilla.org/en/CSS3_Columns 中的解釋。

　　線上列子。

　　長處:

　　間接 CSS 界說，最便利瞭;

　　擴大便利，間接往容器裡增加內容便可。

　　缺陷:

　　隻要高等閱讀器中能力應用;

　　另有一個缺陷，他的數據塊分列是從上到下分列到必定下度後，再把殘剩元素順次增加到下一列，那個實質上便紛歧樣瞭;

　　鑒於那兩個重要缺陷，必定瞭該辦法隻能范圍於下端閱讀器，並且，更合適於筆墨多欄分列。

　　3) 盡對定位。即 Pinterest ，Mark之，KISSY 采取的方法:

　　

　　可謂是最劣的一種計劃，便利增加數據內容，窗心變更，列數/數據塊都邑主動調劑;

　　線上列子。

　　缺陷:

　　須要真現曉得數據塊下度，假如個中包括圖片，須要曉得圖片下度;

　　JS 靜態盤算數據塊地位，當窗心縮放頻仍，大概會狂耗機能。

　　KISSY.Waterfall 真現思緒

　　KISSY 的 Waterfall 組件重要包括兩個部門，一個是對現稀有據塊舉行分列盤算各自地點的地位; 兩是下推轉動時，觸收減載數據操縱，並把數據增加到目的容器中。

　　1) 數據塊分列，算法步調簡述下:

　　初初化時，對容器中已稀有據塊元素舉行第一次盤算，須要用戶給定: a，容器元素 — 以此獵取容器總寬度; b，列寬度; c，最小列數; 終極列數與的是容器寬度/列寬度戰最小列數的最年夜值，如許包管瞭，當窗心很小時，仍舊湧現最小列數的數據;

　　得到列數後，須要保留每一個列確當前下度，如許正在增加每一個數據塊時，才曉得肇端下度是若幹;

　　順次與容器中的全部數據塊，先探求當前下度最小的某列，以後依據列序號，肯定數據塊的left，top值，left 為地點列的序號乘以列寬，top 為地點列確當前下度，末瞭更新地點列確當前下度減上那個數據塊元素的下度，至此，插進一個元素停止;

　　當全部元素插進終瞭後，調劑容器的下度為各列最年夜的下度值，停止順次調劑;

　　機能效力上的留意面: a，假如當前正正在調劑中，又觸收瞭 resize 事宜，須要將前次調劑停息後履行此次調劑(睹 timedChunk 函數); b，resize 觸收會很頻仍，能夠將回調函數緩存一段時刻後履行，即當那段時光內屢次觸收瞭resize事宜，但回調函數隻會履行一次(睹 S.buffer 函數)

　　感興致的能夠拜見源碼。

　　2) 同步減載數據，前裡講的是若何對容器中已有元素舉行分列，但許多情形下，借須要賡續減載新數據塊，為此專門計劃瞭一個自力的模塊 KISSY.Waterfall.Loader，實在那個功效便更簡略瞭，僅包括兩個步調:

　　綁定轉動事宜，並肯定預減載線下度值，即轉動到哪一個下度後，須要往減載數據，實在那個便是列的最小下度值，如許當前轉動值戰最小下度值比擬一下便可斷定出去，是不是要觸收減載數據;

　　減載數據，為瞭紕謬數據源做太多限定，完整由應用者本身決議數據源從哪邊獵取戰其格局，如許更好的便利用戶應用。為此，該組件隻供給一個load(success，end) 接心，如何load 由用戶本身往界說，而個中的 success/end，分離給出若何增加新數據(suceess 即同 addItems)/若何停滯減載的接心。如許實是太便利瞭~~

　　感興致的能夠拜見源碼。

　　KISSY。Waterfall 示例戰文檔

　　看到那邊，是否是很念試用一下~~ 嗯嗯，那裡給出一些相幹進修材料戰示例，以供參考:

　　Waterfall API 文檔，相幹結構器，設置裝備擺設項，辦法皆正在那裡; /docs/html/api/component/waterfall/

　　示例，包括靜態戰靜態兩種。/docs/html/demo/component/waterfall/

　　迎接試用戰提出看法~~

　　起源：/blog/2011/09/14/waterfall/