這是一款非常輕量級的純原生JS的瀑布流插件――Macy.js，如今圖片和視頻網站非常多，非常適應瀑布流這樣的布局方式來呈現給用戶。
這款流布局JS插件僅有4KB的大小，可以說是非常輕量級的哦。配置也比較方便，用戶可以自定義間距、列數，還有個特色就是可以定義不同屏幕分辨率，不同列數，這個應用在響應式網頁設計是非常方便的。
所以，選擇一款簡單易用的瀑布流js插件，可以讓前端工程師快速開發出漂亮的瀑布流Pc網站和react 后臺項目。
瀑布流布局代表網站就是 花瓣網，設計師一定不會陌生的設計網站。
插件特色
先看看Macy.js的項目案例截圖吧：
官網地址： http://macyjs.com/
下面就是具體的使用說明：
Step 1: 在頁尾引入JS文件，（不能放在Header里哦）
<script src="macy.js"></script>
Step 2: HTML結構
<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 }, //設置列數 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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
