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