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

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

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

先看看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