Ultra-lightweight web page flow layout JS plug-in Macy.js

Today I recommend a very easy-to-use Macy.js plug-in. It is a flow layout JS plug-in that uses flow layout to display images. This typesetting method is especially suitable for pages that display a large number of images, and Macy.js The plugin is only 4KB in size.

Macy.js plug-in configuration is also more convenient. Users can customize the spacing, number of columns and different screen resolutions according to their own needs.

Project address: http://macyjs.com/

##Plug-in features

·Lightweight , only 4KB in size, the min version is only 2KB!

· The number of layout columns can be customized;

· Pure JS, no need to rely on jQuery library.

Usage Tutorial

Step 1: Introduce JS files at the footer of the page (cannot be placed in the Header)

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

Step 2: HTML structure

<div id="macy-container">
<div >
<img  src="/static/imghwm/default1.png"  data-src="aa.jpg"  class="lazy"   / alt="Ultra-lightweight web page flow layout JS plug-in Macy.js" >
</div>
</div>

Step 3: Configure JS

<script>
var masonry = new Macy({
        container: &#39;#macy-container&#39;, // 图像列表容器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>

How do you like this plug-in? Get it quickly!