目前位置: 首頁 > Boostrap4響應式模板 > 輕量好用的網頁瀑布流插件 Macy.js (不依賴 Jquery)

輕量好用的網頁瀑布流插件 Macy.js (不依賴 Jquery) 超大 稍大 正常

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

輕量好用的網頁瀑布流插件 Macy.js

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

下載並解壓縮,然後將 dist 目錄內的 macy.js 上傳到模板目錄裡...
下載 Macy.js
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>
macy.js 上傳到模板目錄


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>
對於本站文章有任何問題或建議歡迎寫信給我
本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 現在時間:2022-09-25 05:56:21