CSS3 column 瀑布流佈局

使用column可以非常簡便的實現瀑布流效果。

優點是程式碼非常的簡單，容易掌握，但是不相容低版本IE瀏覽器，IE10+支援。

關於column相關知識點可以參閱CSS3 columns一章節。

CSS程式碼如下：

[CSS] 純文字檢視 複製程式碼
*{ margin:0; padding:0;}
li{ list-style:none;}
img{ border:0;}
.wrap{ width:1200px; margin:auto}
body{ font-size:12px;background:#f5f5f5}
/*
  瀑布流相關程式碼
  其他程式碼沒有任何變動，修改了以下class中的相關程式碼
*/
.tx_list{   
    padding-bottom:10px;
}
.tx_list ul { 
   padding-top:10px;
   -moz-column-count:4;
   -moz-column-gap:14px;
   -webkit-column-count:4;
   -webkit-column-gap:14px;
   column-count:4;
   column-gap:14px;
}
.tx_list ul li{
    display: inline-block;
    overflow:hidden;
    position:relative; 
    width:288px; 
    margin-bottom:20px;  
    background:#fff; 
    box-sizing:border-box;
    -webkit-box-shadow: 2px 5px 10px rgba(219,219,219,.7);
    box-shadow: 2px 5px 10px rgba(219,219,219,.7);
}
/*瀑布流相關程式碼*/
.tx_list ul li img{width:268px; margin:10px 0 0 10px;  }
.tx_list ul li .aside{ 
    color:#666; 
    background:#f9f9f9; 
    padding:8px 10px; 
    box-sizing:border-box;
    box-sizing:border-box; 
    border-top:1px solid #ddd;
}
.tx_list ul li a.tit_a{ 
    margin:8px 0;
    overflow:hidden;
    text-overflow:ellipsis; 
    -o-text-overflow:ellipsis;
    white-space:nowrap;
    width:200px; 
    padding:0 0 0 10px; 
    box-sizing:border-box; 
    float:left;
}
.tx_list ul li .fabuzhe {
    margin:8px 0;
    padding-right:5px;
    color:#38b;
    float:right;
}

HTML程式碼如下：

[HTML] 純文字檢視 複製程式碼
<div class="tx_list wrap">
 <ul>
   <li>
     <a href="#" class="thumbnail">
       <img src="images/img1.png" height="100" />
     </a>
     <div class="clearfix">
       <a href="#" class="tit_a">什麼才是好的網頁設計？</a>
       <a href="#" class="fabuzhe">螞蟻部落</a>
     </div>
     <div class="aside">
       <span>下載：<i class="download">5</i></span>
       <span>評論：<i class="pinglun">30</i></span>
       <span>瀏覽：<i class="view">60</i></span>
     </div>
   </li>
   <li>
     <a href="#" class="thumbnail">
       <img src="images/img1.png" height="200"/>
     </a>
     <div class="clearfix">
       <a href="#" class="tit_a">什麼才是好的網頁設計？</a>
       <a href="#" class="fabuzhe">茅山老道</a>
     </div>
     <div class="aside">
       <span>下載：<i class="download">5</i></span>
       <span>評論：<i class="pinglun">30</i></span>
       <span>瀏覽：<i class="view">60</i></span>
     </div>
   </li>

   <li>
     <a href="#" class="thumbnail">
       <img src="images/img1.png" height="140"/>
     </a>
     <div class="clearfix">
       <a href="#" class="tit_a">什麼才是好的網頁設計？</a>
       <a href="#" class="fabuzhe">一路順風</a>
     </div> 
     <div class="aside">
       <span>下載：<i class="download">5</i></span>
       <span>評論：<i class="pinglun">30</i></span>
       <span>瀏覽：<i class="view">60</i></span>
     </div>    
   </li>

   <li>
     <a href="#" class="thumbnail">
       <img src="images/img1.png" height="160"/>
     </a>
     <div class="clearfix">
       <a href="#" class="tit_a">什麼才是好的網頁設計？</a>
       <a href="#" class="fabuzhe">螞蟻部落</a>
     </div>
     <div class="aside">
       <span>下載：<i class="download">5</i></span>
       <span>評論：<i class="pinglun">30</i></span>
       <span>瀏覽：<i class="view">60</i></span>
     </div>
   </li>
   <li>
     <a href="#" class="thumbnail">
       <img src="images/img1.png" height="160"/>
     </a>
     <div class="clearfix">
       <a href="#" class="tit_a">什麼才是好的網頁設計？</a>
       <a href="#" class="fabuzhe">螞蟻部落</a>
     </div>
     <div class="aside">
       <span>下載：<i class="download">5</i></span>
       <span>評論：<i class="pinglun">30</i></span>
       <span>瀏覽：<i class="view">60</i></span>
     </div>
   </li>
   <li>
     <a href="#" class="thumbnail">
       <img src="images/img1.png" />
     </a>
     <div class="clearfix">
       <a href="#" class="tit_a">什麼才是好的網頁設計？</a>
       <a href="#" class="fabuzhe">螞蟻部落</a>
     </div>
     <div class="aside">
       <span>下載：<i class="download">5</i></span>
       <span>評論：<i class="pinglun">30</i></span>
       <span>瀏覽：<i class="view">60</i></span>
     </div>
   </li>
   <li>
     <a href="#" class="thumbnail">
       <img src="images/img1.png" height="190" />
     </a>
     <div class="clearfix">
       <a href="#" class="tit_a">什麼才是好的網頁設計？</a>
       <a href="#" class="fabuzhe">螞蟻部落</a>
     </div>
     <div class="aside">
       <span>下載：<i class="download">5</i></span>
       <span>評論：<i class="pinglun">30</i></span>
       <span>瀏覽：<i class="view">60</i></span>
     </div>
   </li>
 </ul>

將上述兩端程式碼結合一下，然後設定好圖片即可檢視演示。

核心程式碼如下：

[CSS] 純文字檢視 複製程式碼
.tx_list ul { 
   padding-top:10px;
   -moz-column-count:4;
   -moz-column-gap:14px;
   -webkit-column-count:4;
   -webkit-column-gap:14px;
   column-count:4;
   column-gap:14px;
}

將圖片分為四列顯示，然後再設定一些相關屬性。

需要特別說明的是，需要給li設定如下CSS：

[CSS] 純文字檢視 複製程式碼
display: inline-block

否則就會出現拆分的現象，截圖如下：