方式一：在github上找到项目，复制demo/assets/css/macy.css，以及/dist/macy.js
直接引入项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./demo/assets/css/macy.css">
</head>
<body>
<div id="macy-container">
<!-- 第一行 -->
<div>
<img style="width: 80px;" src="https://profile-avatar.csdnimg.cn/eefff198cd5e41ccbaea441c5f866c5f_weixin_68658847.jpg!1" alt="">
</div>
<div>
<img style="width: 20px;" src="https://thirdwx.qlogo.cn/mmopen/LiaXXhXicIsISKsbYyos3mwHUfW0JzGfgbSWiahBxU5Y1GMFYxdAEogSCvstM39kkP5AYWF0C9dhU6ibMhPFOQMfm0RfPMqUqMHM/132" alt="">
</div>
<div>
<img src="https://take-saas.oss-cn-hangzhou.aliyuncs.com/wechat_applets/coach/bgcimg/bgc-13.png" alt="">
</div>
<div>
<img src="https://take-saas.oss-cn-hangzhou.aliyuncs.com/wechat_applets/coach/bgcimg/bgc-13.png" alt="">
</div>
<div>
<img src="https://take-saas.oss-cn-hangzhou.aliyuncs.com/wechat_applets/coach/bgcimg/bgc-13.png" alt="">
</div>
<!-- 第二行 -->
<div>
<img src="https://take-saas.oss-cn-hangzhou.aliyuncs.com/wechat_applets/coach/bgcimg/bgc-13.png" alt="">
</div>
<div>
<img src="https://take-saas.oss-cn-hangzhou.aliyuncs.com/wechat_applets/coach/bgcimg/bgc-13.png" alt="">
</div>
</div>
</body>
<script src="./dist/macy.js"></script>
<script>
window.onload=function(){
var masonry = new Macy({
container: '#macy-container', // 图像列表容器id
trueOrder: false,
waitForImages: false,
useOwnImageLoader: false,
debug: true,
//设计间距
margin: {
x: 10,
y: 10
},
//设置列数
columns: 4,
//定义不同分辨率（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>
</html>
方式二：我已经把上面的css代码和js代码部署到cdn仓库了，直接引入即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jinweizhe/cdn/macy/macy.css">
</head>
<body>
<div id="macy-container">
<!-- 第一行 -->
<div>
<img style="width: 80px;" src="https://profile-avatar.csdnimg.cn/eefff198cd5e41ccbaea441c5f866c5f_weixin_68658847.jpg!1" alt="">
</div>
<div>
<img style="width: 20px;" src="https://thirdwx.qlogo.cn/mmopen/LiaXXhXicIsISKsbYyos3mwHUfW0JzGfgbSWiahBxU5Y1GMFYxdAEogSCvstM39kkP5AYWF0C9dhU6ibMhPFOQMfm0RfPMqUqMHM/132" alt="">
</div>
<div>
<img src="https://take-saas.oss-cn-hangzhou.aliyuncs.com/wechat_applets/coach/bgcimg/bgc-13.png" alt="">
</div>
<div>
<img src="https://take-saas.oss-cn-hangzhou.aliyuncs.com/wechat_applets/coach/bgcimg/bgc-13.png" alt="">
</div>
<div>
<img src="https://take-saas.oss-cn-hangzhou.aliyuncs.com/wechat_applets/coach/bgcimg/bgc-13.png" alt="">
</div>
<!-- 第二行 -->
<div>
<img src="https://take-saas.oss-cn-hangzhou.aliyuncs.com/wechat_applets/coach/bgcimg/bgc-13.png" alt="">
</div>
<div>
<img src="https://take-saas.oss-cn-hangzhou.aliyuncs.com/wechat_applets/coach/bgcimg/bgc-13.png" alt="">
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/gh/jinweizhe/cdn/macy/macy.js"></script>
<script>
window.onload=function(){
var masonry = new Macy({
container: '#macy-container', // 图像列表容器id
trueOrder: false,
waitForImages: false,
useOwnImageLoader: false,
debug: true,
//设计间距
margin: {
x: 10,
y: 10
},
//设置列数
columns: 4,
//定义不同分辨率（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>
</html>
