原生html和js实现瀑布流布局（macyjs插件，不依赖于jquery，纯原生）

本文主要是介绍原生html和js实现瀑布流布局（macyjs插件，不依赖于jquery，纯原生），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

官网地址

方式一：在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', // 图像列表容器idtrueOrder: 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', // 图像列表容器idtrueOrder: 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>