首頁 > PHP 擴充功能收集與分享 > 完全不需要依賴 jquery 的瀑布流插件下載

有時候使用表格式的呈現方式來列出文章或商品清單時，可能會因標題長度不一或圖片高度不同，而使得排版有點棘手，雖然能用CSS來解決這些問題，但對於超長標題的文章或商品，還是很難處理，因此使用瀑布流來呈現表格式的區塊會是個很好的方法。

這次要介紹的瀑布流插件，完全不需要依賴 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 的瀑布流插件下載有任何問題請到討論區發帖。