完全不需要依賴 jquery 的瀑布流插件下載
2020-11-27
266
相關文章
有時候使用表格式的呈現方式來列出文章或商品清單時,可能會因標題長度不一或圖片高度不同,而使得排版有點棘手,雖然能用CSS來解決這些問題,但對於超長標題的文章或商品,還是很難處理,因此使用瀑布流來呈現表格式的區塊會是個很好的方法。
這次要介紹的瀑布流插件,完全不需要依賴 jquery 庫,所以在任何網站或 ECShop 也能正常使用,<a href="//macyjs.com/" target="_blank" rel="nofollow">官方網站下載macy.js</a>並上傳到模板的js目錄裡 然後在</body>之前

這次要介紹的瀑布流插件,完全不需要依賴 jquery 庫,所以在任何網站或 ECShop 也能正常使用,<a href="//macyjs.com/" target="_blank" rel="nofollow">官方網站下載macy.js</a>並上傳到模板的js目錄裡 然後在</body>之前
<script type="text/javascript" src="模板目錄/js/macy.js"></script> <script> var masonry = new Macy({ container: '#macy-container', trueOrder: false, waitForImages: false, useOwnImageLoader: false, debug: true, mobileFirst: true, columns: 1, margin: { y: 16, x: '2%', }, breakAt: { 1200: 6, 940: 5, 520: 3, 400: 2 }, }); </script>以ecshop的最新文章為例:
<div class="container"> <div id="macy-container"> <!-- {foreach from=$new_articles item=article key=key name=sort} --> <a href="{$article.url}" title="{$article.title|escape:html} {$article.add_time}"> <div class="macy wow fadeInTop"> <img src='{insert name="GetImageSrc" id=$article.id}' alt='{$article.title|escape:html} {$article.add_time}' /> <div class="title"> {$article.short_title} </div> <div class="add_time"> {$article.add_time} </div> </div> </a> <!-- {/foreach} --> </div> </div>點擊圖片可以放大檢視

如果你對完全不需要依賴 jquery 的瀑布流插件下載有任何問題請到討論區發帖。