前端必備插件之純原生JS的瀑布流插件Macy.js
更新時間：2017年11月22日 10:26:13 作者：admin
這篇文章主要介紹了前端必備插件之純原生JS的瀑布流插件Macy.js，一款非常輕量級的純原生JS的瀑布流插件，有興趣的可以了解一下
這是一款非常輕量級的純原生JS的瀑布流插件——Macy.js，如今圖片和視頻網(wǎng)站非常多，非常適應瀑布流這樣的布局方式來呈現(xiàn)給用戶。
這款流布局JS插件僅有4KB的大小，可以說是非常輕量級的哦。配置也比較方便，用戶可以自定義間距、列數(shù)，還有個特色就是可以定義不同屏幕分辨率，不同列數(shù)，這個應用在響應式網(wǎng)頁設計是非常方便的。
所以，選擇一款簡單易用的瀑布流js插件，可以讓前端工程師快速開發(fā)出漂亮的瀑布流Pc網(wǎng)站和react 后臺項目。
瀑布流布局代表網(wǎng)站就是 花瓣網(wǎng)，設計師一定不會陌生的設計網(wǎng)站。
插件特色
- 輕量級，只有4KB的大小，min版僅2KB！
- 布局列數(shù)可自定義配置;
- 純JS，不需要依賴 jQuery 庫.
先看看Macy.js的項目案例截圖吧：
官網(wǎng)地址： http://macyjs.com/
下面就是具體的使用說明：
Step 1: 在頁尾引入JS文件，（不能放在Header里哦）
<script src="macy.js"></script>
Step 2: HTML結(jié)構(gòu)
<div id="macy-container"> <div > <img src="aa.jpg" /> </div> </div>
Step 3: 配置JS
<script>
var masonry = new Macy({
container: '#macy-container', // 圖像列表容器id
trueOrder: false,
waitForImages: false,
useOwnImageLoader: false,
debug: true,
//設計間距
margin: {
x: 10,
y: 10
},
//設置列數(shù)
columns: 6,
//定義不同分辨率（1200，940，520，400這些是分辨率）
breakAt: {
1200: {
columns: 5,
margin: {
x: 23,
y: 4
}
},
940: {
margin: {
y: 23
}
},
520: {
columns: 3,
margin: 3,
},
400: {
columns: 2
}
}
});
</script>
如果你使用了vue和react，可以采用npm安裝macy.JS
npm install macy
github倉庫地址：https://github.com/bigbitecreative/macy.js
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
使用javascript創(chuàng)建快捷方式的簡單實例
這篇文章介紹了使用javascript創(chuàng)建快捷方式的簡單實例，有需要的朋友可以參考一下2013-08-08
下面小編就為大家?guī)硪黄猨s中獲取jsp表單中radio類型的值簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了利用JS實現(xiàn)簡單的日期選擇插件，文中實現(xiàn)兩種效果的日期選擇，一種是默認參數(shù)，點擊日期后直接選擇該日期，另一種是顯示按鈕來設置時間，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
原生js實現(xiàn)可兼容PC和移動端的拖動滑塊功能詳解【測試可用】
這篇文章主要介紹了原生js實現(xiàn)可兼容PC和移動端的拖動滑塊功能,結(jié)合實例形式詳細分析了javascript事件響應及頁面元素屬性動態(tài)操作實現(xiàn)滑塊拖動功能的相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
reduce()方法對數(shù)組中的每個元素按序執(zhí)行一個提供的reducer函數(shù),每一次運行 reducer會將先前元素的計算結(jié)果作為參數(shù)傳入,最后將其結(jié)果匯總為單個返回值,今天我們就介紹一下reduce的幾種簡單使用場景,需要的朋友可以參考下2023-08-08
這篇文章主要為大家介紹了stats.js使用性能監(jiān)控源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
function.bind()方法默認IE8是不支持的，下面有個小技巧可完美解決這個問題，為此疑惑的朋友可以看看2014-10-10
計算機系統(tǒng)并不是通過文件的后綴名來判斷文件類型,而是通過文件簽名來判斷,下面這篇文章主要給大家介紹了關(guān)于JavaScript判斷文件類型三種方法的相關(guān)資料,需要的朋友可以參考下2024-04-04
最近項目中遇到些字符串亂碼問題，解決后有些心得，記錄于此。2009-12-12
使用phantomjs進行網(wǎng)頁抓取的實現(xiàn)代碼
這篇文章主要介紹了使用phantomjs進行網(wǎng)頁抓取的實現(xiàn)代碼,需要的朋友可以參考下2014-09-09