這次要介紹的瀑布流插件,完全不需要依賴 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>
