Seamless Responsive Photo Grid 實際執行畫面

 Seamless Responsive Photo Grid 你有一堆你要顯示的圖像，我們的目標是讓他們邊到邊的瀏覽器窗口沒有差距。加設使用者想要同時展示很多很多的相片，並且要求圖片間需要沒有縫細，那 Seamless Responsive Photo Grid 正好能夠輕鬆滿足你的需求。

使用方法：
第一步 首先把很多很多的圖片都擺上去 HTML
<section id="photos">
  <img src="images/dog-1.jpg" alt="Little doggie">
  <img src="images/cat-1.jpg" alt="Little kittie">
  <img src="images/dog-2.jpg" alt="Little doggie">
  <img src="images/cat-2.jpg" alt="Little kittie">
  <img src="images/dog-3.jpg" alt="Little doggie">
  <img src="images/cat-3.jpg" alt="Little kittie">
  <img src="images/dog-4.jpg" alt="Little doggie">
  <img src="images/cat-4.jpg" alt="Little kittie">
  <img src="images/dog-5.jpg" alt="Little doggie">
  <img src="images/cat-5.jpg" alt="Little kittie">
  <img src="images/dog-6.jpg" alt="Little doggie">
  <img src="images/cat-6.jpg" alt="Little kittie">
  <img src="images/dog-7.jpg" alt="Little doggie">
  <img src="images/cat-7.jpg" alt="Little kittie">
  ...
</section>

第二步 設計 CSS 的樣式表
* { margin: 0; padding: 0; }
#photos {
   line-height: 0;
   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;

}
#photos img {
  width: 100% !important;
  height: auto !important;
}
@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

兩個簡單的步驟就輕鬆完成動作
這是以 CSS3 去調整
所以 IE8 以下的瀏覽器並不支援

作者網站：http://css-tricks.com/13372-seamless-responsive-photo-grid/
檔案大小：3 KB(包含範例)
檔案下載：http://css-tricks.com/examples/SeamlessResponsivePhotoGrid.zip
檔案備份：下載