<!-- 瀑布流排版masonry start 以下的 ul,li 也可以使用 div --> <ul class="itemGroup"> <li class="item"> <a href="路徑/大圖圖檔"><img src="路徑/縮圖圖檔" alt=""></a> <h2>標題文字</h2> <p>內容文字</p> </li> <li class="item"> ...... </li> </ul> <!-- 瀑布流排版masonry end -->
.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; }
<script src="js/masonry.pkgd.min.js"></script>
$('.itemGroup').masonry({
itemSelector: '.item',
columnWidth: 220
});
<!-- 例如 --> <li class="item wow animate__animated animate__fadeInUp"> <a href="路徑/大圖圖檔"><img src="路徑/縮圖圖檔" alt=""></a> <h2>標題文字</h2> <p>內容文字</p> </li>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<script src="js/wow.min.js"></script>
new WOW().init();