瀑布流排版外掛：jquery plugin Masonry，看看範例，下載 JS 檔案。
需要的 HTML 部份
<!-- 瀑布流排版masonry start 以下的 ul,li 也可以使用 div -->
<ul class="itemGroup">
<li class="item">
<a href="images/show/show-L/car1.jpg"><img src="images/show/show/car1.jpg" alt=""></a>
<h2>堪稱世界級的《德國DTM房車賽》驚爆出Audi車隊因刻意衝撞而遭審判</h2>
<p>位居全球房車賽事領先地位的《德國DTM房車賽》，...... <a href="javascript:;"> more... </a></p>
</li>
<li class="item"> ...... </li>
<li class="item"> ...... </li>
<li class="item"> ...... </li>
</ul>
<!-- 瀑布流排版masonry end -->
需要的 CSS 樣式部份
.itemGroup { margin: 0 auto; }
.item { width: 200px; margin: 10px; padding: 7px; background-color: #fff; }
.item a img { width: 100%; height: auto; }
.item h2 { font-size: 16px; color: darkred; }
.item p { font-size: 13px; text-align: justify; color: #333; }
需要的 JS 檔案：masonry.pkgd.min.js
<script src="js/masonry.pkgd.min.js"></script>
需要的 JS 程式部份
$('.itemGroup').masonry({
itemSelector: '.item',
columnWidth: 220
});
WEB