瀑布流插件图片布局方式就是图片使用流局的方式来展示，这种排版方式特别适合有大量图片的网页，比如花瓣网、图片素材网等。今天整理一下这个插件，分享一下。

Macy.js这个插件大小只有4kb，按理说是非常小巧的了。配置也同样很方便，用户可以自定义间距、列数。而且还可以定义不同分辨率，不同列数，尤其是大热的响应式网页布局设计中是很方便的。

项目地址：http://macyjs.com/

插件特色

l  小巧，只有4kb大小。Min版只有2kb

l  布局列数可以自定义配置

l  纯js,不需要依赖于jQuery库

使用教程

第一步：在页尾引入js文件

<script src="macy.js"></script>

第二步：HTML结构

<div id="macy-container">

<div >

<img src="aa.jpg" />

</div>

</div>

第三步：配置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>

敬业工作室  供稿