這是一款非常輕量級的純原生JS的瀑布流插件——Macy.js，如今圖片和視頻網(wǎng)站非常多，非常適應(yīng)瀑布流這樣的布局方式來呈現(xiàn)給用戶。

所以，選擇一款簡單易用的瀑布流js插件，可以讓前端工程師快速開發(fā)出漂亮的瀑布流Pc網(wǎng)站和react 后臺項目。

瀑布流布局代表網(wǎng)站就是 花瓣網(wǎng)，設(shè)計師一定不會陌生的設(shè)計網(wǎng)站。

先看看Macy.js的項目案例截圖吧：

下面就是具體的使用說明：

Step 1: 在頁尾引入JS文件，(不能放在Header里哦)

Step 2: HTML結(jié)構(gòu)

Step 3: 配置JS

var?masonry?=?new?Macy({

container:?'#macy-container',?//?圖像列表容器id

trueOrder:?false,

waitForImages:?false,

useOwnImageLoader:?false,

debug:?true,

//設(shè)計間距

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

}

}

});

如果你使用了vue和react，可以采用npm安裝macy.JS

npm install macy

github倉庫地址：https://github.com/bigbitecreative/macy.js

總結(jié)

以上是生活随笔為你收集整理的react 原生html 插件,纯原生JS的瀑布流插件Macy.js，前端必备插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。