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

news/2024/9/24 1:15:35/

官网地址

方式一：在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>

http://www.ppmy.cn/news/1463878.html

相关文章

QT学习（20）：QStyle和自定义样式

QT学习（20）：QStyle和自定义样式

QStyle 样式&#xff08;继承自QStyle类&#xff09;代表控件的绘制并封装GUI的外观。QStyle是一个封装了GUI外观的抽象基类。Qt使用QStyle去执行几乎所有的内置控件的绘制&#xff0c;确保控件外观和原生控件风格风格相同。 class Q_WIDGETS_EXPORT QStyle : public QObject{…
阅读更多...
QT学习（20）：QStyle类

QT学习（20）：QStyle类

Qt包含一组QStyle子类&#xff0c;这些子类&#xff08;QWindowsStyle&#xff0c;QMacStyle等&#xff09;模拟Qt支持的不同平台的样式&#xff0c;默认情况下&#xff0c;这些样式内置在Qt GUI模块中&#xff0c;样式也可以作为插件提供。 Qt的内置widgets使用QStyle来执行几…
阅读更多...
动态内存管理—C语言通讯录

动态内存管理—C语言通讯录

目录 一&#xff0c;动态内存函数的介绍 1.1 malloc和free 1.2 calloc 1.3 realloc 1.4C/C程序的内存开辟 二&#xff0c;通讯录管理系统 动态内存函数的介绍 malloc free calloc realloc 一&#xff0c;动态内存函数的介绍 1.1 malloc和free void* malloc (…
阅读更多...
关于智慧校园安全用电监测系统的设计

关于智慧校园安全用电监测系统的设计

人生人身安全是大家关注的话题&#xff0c;2019年12月中国消防统计近五年发生在全国学生宿舍的火灾2314起&#xff08;中国消防2019.12.应急管理部消防救援局官方微博&#xff09;&#xff0c;违规电器是引发火灾的主因。如果在各寝室安装智能用电监测器实时监督线路参数&#…
阅读更多...
三层架构有哪三层，为什么要三层

三层架构有哪三层，为什么要三层

三层架构&#xff08;Three-Tier Architecture&#xff09;是一种常见的软件架构模式&#xff0c;将应用程序分为三个逻辑层次&#xff1a;表示层、业务逻辑层和数据访问层。每一层都负责处理特定的任务&#xff0c;这样的分层设计有助于提高系统的可维护性、可扩展性和灵活性。…
阅读更多...
如何学习一个新技能

如何学习一个新技能

1. 提出想法 2.找到学习方法&#xff0c;学习路径 3.开始学 参考视频&#xff1a;如何成为超速学习者&#xff1f;快速学会任何新技能&#xff01;_哔哩哔哩_bilibili
阅读更多...
（2020|ICML PMLR，线性 Transformer，核函数，RNN）Transformer 是 RNN

（2020|ICML PMLR，线性 Transformer，核函数，RNN）Transformer 是 RNN

Transformers are RNNs: Fast Autoregressive Transformers with Linear Attention 公众号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 3. 线性 Transformers 3.1. Transformer 3.2.…
阅读更多...
php 连接sqlserver步骤

php 连接sqlserver步骤

1.首先要确定使用的是sqlserver的哪个版本&#xff0c;比如sqlserver2012 2.确定服务器是64位还是32位的 3.确认一下使用php的哪个版本&#xff0c;比如php7.1 SQL Server 的 Microsoft PHP 驱动程序 Microsoft Drivers for PHP 支持矩阵 - PHP drivers for SQL Server | Mi…
阅读更多...
最新文章

Copyright @ 2022~2023