这是一款非常轻量级的纯原生JS的瀑布流插件——Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户。
所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂亮的瀑布流Pc网站和react 后台项目。
瀑布流布局代表网站就是 花瓣网,设计师一定不会陌生的设计网站。
先看看Macy.js的项目案例截图吧:
下面就是具体的使用说明:
Step 1: 在页尾引入JS文件,(不能放在Header里哦)
Step 2: HTML结构
Step 3: 配置JS
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
}
}
});
如果你使用了vue和react,可以采用npm安装macy.JS
npm install macy
github仓库地址:https://github.com/bigbitecreative/macy.js