原生html和js实现瀑布流布局(macyjs插件,不依赖于jquery,纯原生)

news/2024/7/20 18:39:03/文章来源:https://blog.csdn.net/weixin_68658847/article/details/139239173

官网地址

方式一:在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.luyixian.cn/news_show_1052547.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智研未来,直击 AI DevOps,阿里云用户交流日杭州站来啦!

在这个技术日新月异的时代&#xff0c;云上智能化 DevOps 正以前所未有的速度推动企业创新边界&#xff0c;重塑软件开发的效率与品质。 为深入探索这一变革之路&#xff0c;诚邀您参与我们的专属闭门技术沙龙&#xff0c;携手开启一场关于云上智能化 DevOps 的挑战、实践与未…

展现金融科技前沿力量,ATFX于哥伦比亚金融博览会绽放光彩

不到半个月的时间里&#xff0c;高光时刻再度降临ATFX。而这一次&#xff0c;是ATFX不曾拥有的桂冠—“全球最佳在线经纪商”(Best Global Online Broker)。2024年5月15日至16日&#xff0c;拉丁美洲首屈一指的金融盛会—2024年哥伦比亚金融博览会(Money Expo Colombia 2024) 于…

#12松桑前端后花园周刊-SolidStart、Vercel融资、Angular18、Nextjs15RC、p5.js、ChromeDevTools引入AI

⚡️行业动态 SolidStart 1.0 元框架发布 Solidjs 核心团队发布其元框架 SolidStart 1.0 正式版&#xff0c;其特点如下&#xff1a;基于文件系统的路由&#xff1b;支持SSR、流式SSR、CSR、SSG渲染模式&#xff1b;通过代码分割、树摇和无用代码删除构建优化&#xff1b;基于…

typora自动生成标题序号(修改V1.0)

目录 带序号效果图 解决方法 带序号效果图 解决方法 1.进入文件夹&#xff1a;文件–>偏好设置–>外观–>主题–>打开主题文件夹 2.如果没有base.user.css文件&#xff0c;新建一个。如果有直接用记事本打开&#xff0c;把下面代码拷贝进去保存。 /** initiali…

设计模式 19 模板模式 Template Pattern

设计模式 19 模板模式 Template Pattern 1.定义 模板模式&#xff08;Template Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一个算法的骨架&#xff0c;将一些步骤的具体实现延迟到子类中。在模板模式中&#xff0c;定义了一个抽象类&#xff0c;其中包含了一个…

什么是光栅化?

一、 什么是光栅化? 光栅化作用是将几何数据变换后转换为像素呈现在显示设备上的一个过程。几何数据转换为像素&#xff0c; 本质是坐标变换、几何离散化&#xff0c;如下&#xff1a; 其中包含了坐标变换和几何离散化&#xff1a; 二、光栅化完成了什么 3D中&#xff0c;物…

Vue2 Element-UI 分页组件el-pagination 修改 自带的total、跳转等默认文字

场景需求&#xff1a; Vue2 Element-UI 分页组件el-pagination 修改 自带的total、跳转等默认文字。如下图&#xff1a;默认提示字变成了英文&#xff0c;如何将其 变成 汉字提示呢&#xff1f; 解决方案&#xff1a; 1.方案1&#xff1a;修改DOM内容 不提倡此方案&#xf…

Mybatis——入门

新建 idea 准备 数据库 create table user(id int unsigned primary key auto_increment comment ID,name varchar(100) comment 姓名,age tinyint unsigned comment 年龄,gender tinyint unsigned comment 性别, 1:男, 2:女,phone varchar(11) comment 手机号 ) comment 用…

【网络安全】勒索软件ShrinkLocker使用 windows系统安全工具BitLocker实施攻击

文章目录 威胁无不不在BitLocker 概述如何利用BitLocker进行攻击如何降低影响Win11 24H2 装机默认开启 BitLocker推荐阅读 威胁无不不在 网络攻击的形式不断发展&#xff0c;即便是合法的 Windows 安全功能也会成为黑客的攻击工具。 卡巴斯基实验室专家 发现 使用BitLocker的…

流程引擎之compileflow idea 2024.*插件支持

之前有使用过多种类型工作流&#xff0c;但最近研究工作流引擎对比各有优劣&#xff0c;compileflow内存支持性能不错&#xff0c;但在idea新版本使用的时候发现插件不支持&#xff0c;干脆自己修改源码手撸一个&#xff08;当前版本2024.1验证可用&#xff0c;如果有其他版本不…

如何给出好的“文言一心”指令?

一、文言一心是什么&#xff1f; 在现代技术背景下&#xff0c;“文言一心”还是百度公司创建的一款大语言模型。这款模型基于飞桨深度学习平台和文心知识增强大模型&#xff0c;并拥有强大的中文语料库&#xff0c;可以理解和生成富含文化内涵和哲理的文本内容。其核心技术架构…

探索增强现实(AR)在AI去衣技术中的独特作用

引言&#xff1a; 随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;我们见证了其在多个领域的突破性应用&#xff0c;从自然语言处理到图像识别&#xff0c;再到计算机视觉。其中&#xff0c;AI去衣技术作为计算机视觉领域中的一个具有争议性的分支&#xff…

基础—SQL—图形化界面工具的DataGrip使用(2)

一、回顾与引言 &#xff08;1&#xff09; 上次内容&#xff0c;博客讲到了DDL语句的数据库操作、表操作、表字段的操作的相关语法&#xff0c;然而之前都是在MySQL的命令行当中去操作演示的。这种方式可以用&#xff0c;但是使用的话&#xff0c;第一&#xff0c;在我们日常…

课时138:变量进阶_变量实践_综合案例

2.1.3 综合案例 学习目标 这一节&#xff0c;我们从 免密认证、脚本实践、小结 三个方面来学习 免密认证 案例需求 A 以主机免密码认证 连接到 远程主机B我们要做主机间免密码认证需要做三个动作1、本机生成密钥对2、对端机器使用公钥文件认证3、验证手工演示 本地主机生成…

ajax快速入门

1 Ajax介绍 1概念&#xff1a; Asynchronous JavaScript And XML&#xff0c;异步的JavaScript和XML。 2作用&#xff1a; 数据交换&#xff1a;通过Ajax可以给服务器发送请求&#xff0c;并获取服务器响应的数据。 异步交互&#xff1a;可以在不重新加载整个页面的情况下&…

【Qt】深入探索Qt事件处理:从基础到高级自定义:QEvent

文章目录 前言&#xff1a;1. 事件的介绍2. 事件的处理2.1. 示例1&#xff1a; 重写鼠标进入和鼠标离开事件2.2. 示例2&#xff1a;当鼠标点击时&#xff0c;获取对应的坐标值&#xff1b;2.3. 鼠标释放事件2.4. 鼠标双击事件2.5. 鼠标移动事件2.6. 鼠标滚轮的滚动事件 3. 按键…

Android11 事件分发流程

在Android 11 输入系统之InputDispatcher和应用窗口建立联系一文中介绍到&#xff0c;当InputDispatcher写入数据后&#xff0c;客户端这边就会调用handleEvent方法接收数据 //frameworks\base\core\jni\android_view_InputEventReceiver.cpp int NativeInputEventReceiver::h…

HTML静态网页成品作业(HTML+CSS)——宠物狗介绍网页(3个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有3个页面。 二、作品演示 三、代…

网页图片加载慢的求解指南

网页/图片加载慢的求解指南 一、前言与问题描述 今天刚换上华为的HUAWEI AX3 Pro New&#xff0c;连上WIFI后测速虽然比平时慢&#xff0c;但是也不算太离谱&#xff0c;如下图所示&#xff1a; 估计读者们有也和作者一样&#xff0c;还没意识到事情的严重性&#x1f601;。 …

452. 用最少数量的箭引爆气球(中等)

452. 用最少数量的箭引爆气球 1. 题目描述2.详细题解3.代码实现3.1 Python3.2 Java 1. 题目描述 题目中转&#xff1a;452. 用最少数量的箭引爆气球 2.详细题解 引爆所有气球&#xff0c;弓箭数要最少&#xff0c;那么每支弓箭尽量多的引爆气球&#xff0c;采用贪心策略。对于…