首頁 > Boostrap 響應式模板製作 > 輕量好用的網頁瀑布流插件 Macy.js (不依賴 Jquery)

瀑布流插件主要用來將網頁上的指定區塊中的元素排列整齊，有如雜誌般的排版方式，可以不必考慮圖片的高度就能自動將多張圖文排列整齊，實際效果請見本站首頁，網路上也有許多瀑布流插件，但我覺得 Macy.js 體積小設定又簡單，所以推薦給大家，在購物網站中雖然圖片的尺寸相同，但商品名稱字數卻不一樣，若使用自動縮略則有可能後面的字被截斷而顯示不完整，這樣的結果將對SEO造成一定程度的影響，倘若要完整顯示商品名稱，則會使區塊高低參差不齊而影響排版，因此使用瀑布流插件作為排版輔助工具的確是不錯的做法：

點擊圖片可以放大檢視

任何修改前，請記得備份相關檔案...

下載並解壓縮，然後將 dist 目錄內的 macy.js 上傳到模板目錄裡...
點擊圖片可以放大檢視

點擊圖片可以放大檢視

1、在要使用瀑布流的頁面最後 </body> 之前加入以下語法，模板目錄請指定正確的 macy.js 存放資料夾，#macy-container 表示瀑布流將作用於 id="macy-container" 區塊內的元素，可以是圖片、文字、圖文並茂的任意組合：

<script src="模板目錄/macy.js"></script>
<script>
var macy = Macy({
	container: '#macy-container',
	trueOrder: false,// 真實排序 默認：false
	waitForImages: false,// 延遲載入圖片 默認值：false 如果設置為 true，Macy 將等待頁面上的所有圖像加載後再運行。默認設置為false，每次加載圖像時都會運行。
	margin: 15,// 圖的間距，可分開指定X、Y，單位:px
	columns: 6,// 列 默認：4
	breakAt: {// 設置不同寬度的斷點欄數
		1320: 6,
		1140: 5,
		960: 4,
		720: 3,
		540: 2,
		320: 1
	}
});
</script>

點擊圖片可以放大檢視

2、在頁面中的 macy-container 區塊裡的每個小區塊都是一個瀑布流，不論每個小區塊內容多寡，macy.js 都能整齊排列，macy-container 只是一個區塊名稱，可以自行定義，但必須和 js 中的 macy-container 一樣，否則無法作用：

<div id="macy-container">
	<div><img src="..." alt="" /></div>
</div>

底下是本站首頁顯示文章分類的代碼，僅供參考：

<div id="macy-container">
	<!--{foreach from=$article_categorie item=cat name=cat key=key}-->
	<div class="grid-item">
		<div class="title">
			<a href="{$cat.url}" title="">
				{$cat.icon}{$cat.name|escape:html}
				<span class="cat_num">{$cat.num}</span>
			</a>
		</div>
		<div class="item">
			<!-- {if $cat.sub}-->
			<!--{foreach from=$cat.sub item=sub name=sub}-->
				<!--{if $smarty.foreach.sub.iteration lt 11}-->
				<div class="sub text-overflow">
					<!--{if $sub.is_new}-->
					<span class="is_new"><em>NEW</em></span>
					<!--{/if}-->
					<a href="{$sub.url}" title="">{$sub.short_title}</a>
				</div>
				<!-- {/if}-->
			<!-- {/foreach} -->
			<!-- {/if}-->
		</div>
	</div>
	<!-- {/if}-->
	<!--{/foreach}-->
</div>

如果你對輕量好用的網頁瀑布流插件 Macy.js (不依賴 Jquery)有任何問題請到討論區發帖。