Macy.js — lightweight waterfall layout with Javascript

Macy.js is a javascript library plugin that can customize the columns,margin depended on different browser resolution.It’s very friendly to responsive design websites and it’s lightweight which is only 4KB and min version 2KB.

Github here

Step1:
Link macy.js

Step2:
HTML

html

CSS

css

The images are contained in the parents DOM.

Step3:
JS

js

Here the container is the section named macy-container. And columns margin should be set you want. breakAt: the conditions when the attributes change, when the resolutions change. Like the responsive CSS ways: @media screen and (max-width: XXX){…}