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

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

news 2026/2/9 3:56:38

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

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

UTF-8编码

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

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

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

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

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

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

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

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

nginx-host绕过实例复现

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

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

类与对象内部类成员内部类在一个类的内部定义的类。 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

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

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

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

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

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

Mysql5.7安装【Windows版】

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

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

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

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

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

网络安全-字典生成-crunch

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

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

闪光桐人の实习日记

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

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

PostgreSQL 常见配置参数

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

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

JAVA 常用类型之String结构

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

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

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

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

编程日记 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的概念和使用

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

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

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

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

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

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

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

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

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook，用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途，下面我将全面详细地介绍它的特性和用法。基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...

编程新知 2026/1/4 5:02:00

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42