当前位置： 首页 > news >正文

[Web] 简单瀑布流布局实现

news 文章来源：https://blog.csdn.net/m0_46555380/article/details/129021120 2024/11/24 20:02:27

目前的纯 CSS 布局, 是没办法实现比较完美的瀑布流布局的.

参考: CSS总结:瀑布流布局 - 黑白程序员

我使用 JS + CSS, 并且自动布局实现了较为简单, 观赏性好的瀑布流布局.

代码

HTML:

<!DOCTYPE html>
<html lang="en">
<head><link rel="stylesheet" href="css/style.css">
</head>
<body><button onclick="add_new()">add</button><button onclick="start_loop()">start loop</button><button onclick="stop_loop()">stop loop</button><!--瀑布流容器--><div id="masonry"><!--瀑布流列--><div class="masonry-column-container"><div class="masonry-column"></div></div><div class="masonry-column-container"><div class="masonry-column"></div></div><div class="masonry-column-container"><div class="masonry-column"></div></div><div class="masonry-column-container"><div class="masonry-column"></div></div><div class="masonry-column-container"><div class="masonry-column"></div></div><div class="masonry-column-container"><div class="masonry-column"></div></div><div class="masonry-column-container"><div class="masonry-column"></div></div></div><script>// 包装一个简单的随机数function random(start, end) {return Math.random() * (end - start) + start;}// 在瀑布流中添加一个元素function add_new() {let masonry = document.getElementById("masonry");let columns = masonry.querySelectorAll(".masonry-column");let minHeightColumn = columns[0];// 拿到高度最低的列columns.forEach(ele => {if (ele.scrollHeight < minHeightColumn.scrollHeight) {minHeightColumn = ele;}});// 创建一个新元素 (设置高度, 背景颜色)let new_item = document.createElement('div');new_item.classList.add('item');new_item.style.height = `${Math.random() * 200 + 70}px`;new_item.style.backgroundColor = `rgb(${random(0, 255)},${random(0, 255)},${random(0, 255)})`// 在高度最低的列中添加元素minHeightColumn.appendChild(new_item);}var masonry_loop;function start_loop() {masonry_loop = setInterval(add_new, 50);}function stop_loop() {clearInterval(masonry_loop);}</script>
</body>
</html>

CSS:

/* 瀑布流容器 */
#masonry {margin: 0 auto;width: 80vw;       /* 居中 */display: grid;     /* 网格布局 */grid-template-columns: repeat(7, 1fr);   /* 总共 7 列 */gap: 10px;                               /* 间距 10px */
}/* 指定列是相对位置 (其中的元素可以相对列来定位) */
#masonry .masonry-column {position: relative;
}/* 限制内容的宽度占满列, 加上边距, 圆角 */
#masonry .item {width: 100%;margin-top: 10px;border-radius: 1em;
}

在 CodePen 上查看: Simple Masonry

相关文章：

[Web] 简单瀑布流布局实现

目前的纯 CSS 布局, 是没办法实现比较完美的瀑布流布局的. 参考: CSS总结:瀑布流布局 - 黑白程序员 我使用 JS CSS, 并且自动布局实现了较为简单, 观赏性好的瀑布流布局. 代码 HTML: <!DOCTYPE html> <html lang"en"> <head><link rel&quo…...

编程日记 2023/2/15 2:17:28

多线程之死锁，哲学家就餐问题的实现

1.死锁是什么 死锁是这样一种情形&#xff1a;多个线程同时被阻塞&#xff0c;它们中的一个或者全部都在等待某个资源被释放。由于线程被无限期地阻塞&#xff0c;因此程序不可能正常终止。 2.哲学家就餐问题 有五个哲学家&#xff0c;他们的生活方式是交替地进行思考和进餐…...

编程日记 2023/2/15 2:16:18

UTF-8编码

介绍 UTF-8 编码 UTF-8 是一种针对 Unicode 的可变长度字符编码。 针对 Unicode&#xff1a;UTF-8 是 Unicode 的实现方式之一。相当于 Unicode 规定了字符对应的代码值&#xff0c;这个代码值需要转换为字节序列的形式&#xff0c;用于数据存储、传输。代码值到字节序列的转…...

编程日记 2023/2/15 2:15:13

likeshop单商户SaaS版V1.8.2说明！

likeshop单商户SaaS版V1.8.2主要更新如下&#xff1a; 新增 前端登录引导用户填写头像昵称 PC端—注册页面显示服务协议和隐私政策 PC端—首次进入商城弹出协议提示 PC端—结算页新增门店自提的配送方式 后台—PC端菜单导航栏的跳转链接支持添加自定义链接 ​​ ​​ ​ 优…...

编程日记 2023/2/15 2:14:07

算法训练营 day46 动态规划 最后一块石头的重量 II 目标和 一和零

算法训练营 day46 动态规划 最后一块石头的重量 II 目标和 一和零 最后一块石头的重量 II 1049. 最后一块石头的重量 II - 力扣&#xff08;LeetCode&#xff09; 有一堆石头&#xff0c;用整数数组 stones 表示。其中 stones[i] 表示第 i 块石头的重量。 每一回合&#xf…...

编程日记 2023/2/15 2:13:02

nginx-host绕过实例复现

绕过Nginx Host限制第一种处理方法Nginx在处理Host的时候&#xff0c;会将Host用冒号分割成hostname和port&#xff0c;port部分被丢弃。所以&#xff0c;我们可以设置Host的值为2023.mhz.pw:xxx"example.com&#xff0c;这样就能访问到目标Server块&#xff1a;第二种处理…...

编程日记 2023/2/15 2:11:56

Java学习记录day9

类与对象 内部类 成员内部类 在一个类的内部定义的类。 public class Outer {private int a 10;public void outMethod() {System.out.println("这是外部类中的方法");}// 成员内部类public class Inner{private int b 10;public void innerMethod() {// 外部类…...

编程日记 2023/2/15 2:10:51

ActiveReports.NET 17.0 Crack by Xacker

一个完整的报告解决方案&#xff0c;用于在您的业务应用程序中设计、定制、发布和查看报告。 ActiveReports.NET 通过直观的 Visual Studio 集成报表设计器和丰富的控件帮助您提供精美的报表。ActiveReports 提供基于代码的跨平台报告、易于使用的设计器和灵活的 API。适用于桌…...

编程日记 2023/2/15 2:09:44

【计算机网络】传输层TCP协议

文章目录认识TCP协议TCP协议的格式字段的含义序号与确认号六个标志位窗口大小确认应答(ACK)机制超时重传机制连接管理机制三次握手四次挥手滑动窗口流量控制拥塞控制延迟应答捎带应答面向字节流粘包问题TCP异常情况总结认识TCP协议 传输控制协议 &#xff08;TCP&#xff0c;T…...

编程日记 2023/2/15 2:08:40

Mysql5.7安装【Windows版】

文章目录一、下载二、添加到环境变量三、添加配置文件my.ini四、安装Mysql 修改密码一、下载 下载地址 滑倒最下面有一个MySQL Community Server 选择要下载的版本 二、添加到环境变量 下载好了之后开始解压 把bin目录添加到环境变量 可以点击进入bin目录&#xff0c;直接复…...

编程日记 2023/2/15 2:07:32

分布式一致性算法Raft原理图释

什么是分布式一致性算法Raft 分布式一致性算法Raft&#xff1a;指在分布式场景下实现集群数据同步的解决方案 掌握了这个算法&#xff0c;就可以较容易地处理绝大部分场景的容错和数据一致性需求 Raft三大角色 跟随者&#xff08;Follower&#xff09;&#xff1a;普通群众…...

编程日记 2023/2/15 2:06:24

网络安全-字典生成-crunch

网络安全-字典生成-crunch crunch工具&#xff0c;在kali已经集成好了 2是代表最小字符长度 4是最大字符长度 生成了一个2M的文件 还有我们来查看这个密码本 从abcd26个英文字母的2位到4位的组合&#xff0c;他全部排列了一次 还可以自定义数字&#xff0c;特殊字符&#xf…...

编程日记 2023/2/15 2:05:16

闪光桐人の实习日记

2023年2月13日 1&#xff0c;认识了职场礼仪&#xff0c;学习了职场礼仪的重要性 尊重->心情愉悦->建立信任与好感->合作机遇的敲门砖 2&#xff0c;学习了职场礼仪中的邮件礼仪 模板管理中设置自己的名片 部门写到三级部&#xff0c;如果部门名太长要换一行 发送…...

编程日记 2023/2/15 2:04:09

PostgreSQL 常见配置参数

max_wal_size : 两个检查点&#xff08;checkpoint&#xff09;之间&#xff0c;WAL可增长的最大大小&#xff0c;即&#xff1a;自动WAL checkpoint允许WAL增长的最大值。该值缺省是1GB。如果提高该参数值会提升性能&#xff0c;但也是会消耗更多空间、同时会延长崩溃恢复所需…...

编程日记 2023/2/15 2:03:03

JAVA 常用类型之String结构

String在java中我们是用来操作字符串的&#xff0c;但它的底层结构确是一个char[]数组&#xff0c;通过数组的方式将每个字符进行保存。 使用时&#xff1a;String str"ABCD"&#xff0c;内部存value确是&#xff1a;value[A,B,C,D]; 如下图&#xff1a; 参考String源…...

编程日记 2023/2/15 2:01:57

二三层网络设备封装与解封装原理

1、寻址转发&#xff08;寻址指的是寻找IP地址&#xff09; 路由表放在一个公共的地方&#xff0c;比如主控板上&#xff0c;由主控板 的CPU运行路由协议&#xff0c;计算路由&#xff0c;生成和维护路由表。 转发表与路由表&#xff1a; 转发表是根据路由表生成的。路由表中…...

编程日记 2023/2/15 2:00:52

9、MyBatis框架——使用注解开发实现数据库增删改查操作、一级缓存、二级缓存、MyBatis实现分页

目录 一、使用注解开发实现数据库增删改查操作 1、搭建项目 2、使用注解开发操作数据库 二、一级缓存 1、一级缓存失效的情况 三、二级缓存 1、手动开启二级缓存cacheEnabled 2、二级缓存机制 四、MyBatis实现分页 1、配置环境 2、startPage()开启分页 3、PageInfo…...

编程日记 2023/2/15 1:59:44

C++STL剖析（六）—— set和multiset的概念和使用

文章目录&#x1f31f; 前言&#x1f351; 树型结构和哈希结构&#x1f351; 键值对1. set的介绍和使用&#x1f351; set的模板参数列表&#x1f351; set的构造&#x1f351; set的使用&#x1f345; insert&#x1f345; find&#x1f345; erase&#x1f345; swap&#x1…...

编程日记 2023/2/15 1:58:37

SpringColud第四讲 Nacos的Windows安装方式和Linux的安装方式

在Nacos的GitHub页面&#xff0c;提供有下载链接&#xff0c;可以下载编译好的Nacos服务端或者源代码&#xff1a; 目录 1.Windows安装Nacos 1.1.下载 1.2.解压 1.3.修改相关配置&#xff1a; 1.4.启动&#xff1a; 1.5.登录&#xff1a; 2.Linux的安装方式Nacos 2.1.…...

编程日记 2023/2/15 1:57:31

微服务项目【网关服务限流熔断降级分布式事务】

网关服务限流熔断降级 第1步&#xff1a;启动sentinel-dashboard控制台和Nacos注册中心服务 第2步&#xff1a;在网关服务中引入sentinel依赖 <!-- sentinel --> <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-…...

编程日记 2023/2/15 1:56:24

【情人节用Compose给女神写个爱心动画APP】

情人节用Compose给女神写个爱心动画APP前言涉及知识点实现思路实现过程绘制爱心创建动画效果Preview预览效果完整源码彩蛋前言 前一阵子看电视里的学霸用代码写了个炫酷的爱心&#xff0c;网上有很多js和python的源码&#xff0c;复制粘贴就能拥有&#xff0c;但是Android的好…...

编程日记 2023/2/15 1:55:17

GUI swing和awt

GUI&#xff08;Graphical User Interface&#xff0c;简称 GUI&#xff0c;图形用户界面&#xff09;是指采用图形方式显示的计算机操作用户界面&#xff0c;与早期计算机使用的命令行界面相比&#xff0c;图形界面对于用户来说在视觉上更易于接受。Java GUI主要有两个核心库&…...

编程日记 2023/2/15 1:54:10

速通Spring

尚硅谷2023最新版Spring6课程_bilibili 1 Spring 【强制】Spring是什么&#xff1f; 1) Spring是一款主流的Java EE轻量级开源框架。 轻量级&#xff1a;体积很小&#xff0c;且不需要依赖于其他组件。 2) 狭义的Spring。 Spring Framework。 3) 广义的Spring。 以Spring F…...

编程日记 2023/2/15 1:53:04

【C++】C++入门

一、 C关键字&#xff08;C98&#xff09; C有63个关键字&#xff08;C语言有32个&#xff09;&#xff0c;如下&#xff1a; asmdoifreturntrycontinueautodoubleinlineshorttypedefforbooldynamic_castintsignedtypeidpublicbreakelselongsizeoftypenamethrowcaseenummutabl…...

编程日记 2023/2/15 1:51:59

Linux网络技术学习（五）—— 网络设备初始化（I）

文章目录什么时候进行的设备初始化&#xff1f;设备注册和初始化NIC&#xff08;网卡 Network Interface Card&#xff09;初始化的基本目标设备与内核之间的交互硬件中断中断类型传送节流方式为了改善效率中断共享IRQ处理函数映射的组织irqaction结构体存储方式什么时候进行的…...

编程日记 2023/2/15 1:50:53

[技术选型] ClickHouse和StarRocks的介绍

文章目录1.ClickHouse介绍2.StarRocks介绍1.ClickHouse介绍 ClickHouse是面向联机分析处理&#xff08;OLAP&#xff09;的开源分析引擎。最初由俄罗斯第一搜索引擎Yandex开发&#xff0c;于2016年开源&#xff0c;开发语言为C。由于其优良的查询性能&#xff0c;PB级的数据规…...

编程日记 2023/2/15 1:49:49

算法刷题打卡第90天：表现良好的最长时间段

表现良好的最长时间段 难度&#xff1a;中等 给你一份工作时间表 hours&#xff0c;上面记录着某一位员工每天的工作小时数。 我们认为当员工一天中的工作小时数大于 8 小时的时候&#xff0c;那么这一天就是「劳累的一天」。 所谓「表现良好的时间段」&#xff0c;意味在这…...

编程日记 2023/2/15 1:48:41

Python语言零基础入门教程（十七）

Python 文件I/O 本章只讲述所有基本的 I/O 函数&#xff0c;更多函数请参考Python标准文档。 #### 打印到屏幕 最简单的输出方法是用print语句&#xff0c;你可以给它传递零个或多个用逗号隔开的表达式。此函数把你传递的表达式转换成一个字符串表达式&#xff0c;并将结果写…...

编程日记 2023/2/15 1:47:35

C语言中大小端问题

目录 一、什么是大小端 二、 举个例子 三、大小端演示 四、解释"二"中举例的问题 ​五、怎么判断是大端还是小端 六、一个题目 一、什么是大小端 大端模式&#xff08;大端字节序存储&#xff09;&#xff1a;就是高位字节数据存放在内存的低地址端&#xff…...

编程日记 2023/2/15 1:46:29

vue2+微前端qiankun从搭建到部署的实践（主子应用切换；集成vue3+vite3子应用）

一、最终效果 二、微前端&#xff08;qiankun&#xff09;介绍及为什么选择用微前端&#xff0c;可以看官网 三、目录结构如下 四、具体配置 一、主应用配置 1、主应用技术栈 Vue-cli4搭建项目Vue2Element-Uiqiankun&#xff1b;Vue2Element-Uiqiankun 2、搭建好主项目&…...

编程日记 2023/2/15 1:45:23

做外贸的物流网站/产品互联网推广

Docker 包括三个基本概念: 镜像&#xff08;Image&#xff09;&#xff1a;Docker 镜像&#xff08;Image&#xff09;&#xff0c;就相当于是一个 root 文件系统。比如官方镜像 ubuntu:16.04 就包含了完整的一套 Ubuntu16.04 最小系统的 root 文件系统。容器&#xff08;Cont…...

编程日记 2024/11/24 15:07:28

vue响应式网站开发/营销型网站有哪些平台

0x00前言 今天在知道创宇上发现3月26日提交WordPress XSS和远程代码执行漏洞&#xff0c;于是试着复现了下远程代码执行漏洞 该漏洞源于Social Warfare组件&#xff0c;并且版本<3.5.2、且要是管理员登录状态&#xff0c;因此该漏洞是个后台代码执行 漏洞报告https://www.we…...

编程日记 2024/11/24 8:36:15

职业病院网站建设/网站推广优化之八大方法

对象或类内部往往会包含别的对象&#xff0c;在创建成员对象时你可能习惯于使用使用传统的new来创建对象。但是这种方式会造成两个对象之间的依赖。 工厂模式就是一种有助于消除或减弱这种依赖的设计模式。 书中用自行车商店的例子阐述了简单工厂模式。先是用传统的方式&#x…...

编程日记 2024/11/24 5:04:56

网站做宣传的免费渠道有那种/深圳seo技术

---恢复内容开始--- 【强制】POJO类中布尔类型的变量,都不要加is,否则部分框架解析会引起序列化错误。反例:定义为基本数据类型boolean isSuccess;的属性,它的方法也是isSuccess(),RPC框架在反向解析的时候,“以为”对应的属性名称是success,导致属性获取不到,进而抛出异常。 【…...

编程日记 2024/11/24 1:32:33

网站建设更改/北京网络营销推广公司

一、商标注册问题Q&#xff1a;深圳区域的个人申请美国商标补贴需要什么资料&#xff1f;A&#xff1a;你可以登录深圳市市场监督管理局的官方网站&#xff08;http://app01.szaic.gov.cn/patent.Web/UI/Patent/TradeMarkWebApplication.aspx&#xff09;申请商标资助&#xff…...

编程日记 2024/11/24 0:52:44

上海建定建设工程信息网/网站seo系统

嵌入式安全元件&#xff08;eSE&#xff09;市场的企业竞争态势 该报告涉及的主要国际市场参与者有NXP Semiconductors (Netherlands)、Infineon (Germany)、STMicroelectronics (Switzerland)、Gemalto (Netherlands)、IDEMIA (France)、Beijing HuaDa ZhiBao Electronic Syst…...

编程日记 2024/11/23 22:31:59