瀑布流佈局淺析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 中的說明。 a href="http://lizzie.github.com/kissy/src/waterfall/demo/css3.html" jQuery16108010429281727349="9">
• 線上例子。

優勢:

• 直接 CSS 定義，最方便了；
• 擴展方便，直接往容器裏添加內容便可。

缺點:

• 只有高級瀏覽器中才能使用；
• 還有一個缺點，他的數據塊排列是從上到下排列到必定高度後，再把剩餘元素依次添加到下一列，這個本質上就不同了；
• 鑑於這兩個主要缺點，註定了該方法只能侷限於高端瀏覽器，並且，更適合於文字多欄排列。