WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

4-14. 新車展場: 瀑布流排版的設計

瀑布流排版外掛: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
});

 

 

go TOP