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

CSS实现瀑布流的两种方式

news 2026/2/10 18:27:13

column 多行布局实现瀑布流

1.column 实现瀑布流主要依赖两个属性。

2.column-count 属性，是控制屏幕分为多少列。

3.column-gap 属性，是控制列与列之间的距离。

<!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>瀑布流布局-column</title><style>.box {margin: 10px;column-count: 3;column-gap: 10px;}.item {margin-bottom: 10px;}.item img{width: 100%;height:100%;}</style>
</head>
<body><div class="box"><div class="item"><img  src="./imgs/1.jpg" alt="1" /></div><div class="item"><img  src="./imgs/2.jpg" alt="2" /></div><div class="item"><img  src="./imgs/3.jpg" alt="3" /></div><div class="item"><img  src="./imgs/1.jpg" alt="1" /></div><div class="item"><img  src="./imgs/2.jpg" alt="2" /></div><div class="item"><img  src="./imgs/3.jpg" alt="3" /></div><div class="item"><img  src="./imgs/1.jpg" alt="1" /></div><div class="item"><img  src="./imgs/2.jpg" alt="2" /></div><div class="item"><img  src="./imgs/3.jpg" alt="3" /></div><div class="item"><img  src="./imgs/1.jpg" alt="1" /></div><div class="item"><img  src="./imgs/2.jpg" alt="2" /></div><div class="item"><img  src="./imgs/3.jpg" alt="3" /></div><div class="item"><img  src="./imgs/1.jpg" alt="1" /></div><div class="item"><img  src="./imgs/2.jpg" alt="2" /></div><div class="item"><img  src="./imgs/3.jpg" alt="3" /></div><div class="item"><img  src="./imgs/1.jpg" alt="1" /></div><div class="item"><img  src="./imgs/2.jpg" alt="2" /></div><div class="item"><img  src="./imgs/3.jpg" alt="3" /></div><div class="item"><img  src="./imgs/1.jpg" alt="1" /></div><div class="item"><img  src="./imgs/2.jpg" alt="2" /></div><div class="item"><img  src="./imgs/3.jpg" alt="3" /></div><div class="item"><img  src="./imgs/1.jpg" alt="1" /></div><div class="item"><img  src="./imgs/2.jpg" alt="2" /></div><div class="item"><img  src="./imgs/3.jpg" alt="3" /></div></div>
</body>
</html>

 

flex 弹性布局实现瀑布流

flex 实现瀑布流需要将最外层元素设置为 display: flex，使用弹性布局

flex-flow:column wrap 使其纵向排列并且换行换行

设置 height: 100vh 填充屏幕的高度，也可以设置为单位为 px 的高度，来容纳子元素。

每一列的宽度可用 calc 函数来设置，即 width: calc(100%/3 - 20px)。分成等宽的 3 列减掉左右两遍的 margin 距离。

<!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>瀑布流布局-flex</title><style>.box {display: flex;  flex-flow: column wrap;height: 100vh;}.item {margin: 10px;width: calc(100%/3 - 20px);}.item img{width: 100%;height:100%;}</style>
</head>
<body><div class="box"><div class="item"><img  src="./imgs/1.jpg" alt="1" /></div><div class="item"><img  src="./imgs/2.jpg" alt="2" /></div><div class="item"><img  src="./imgs/3.jpg" alt="3" /></div><div class="item"><img  src="./imgs/1.jpg" alt="1" /></div><div class="item"><img  src="./imgs/2.jpg" alt="2" /></div><div class="item"><img  src="./imgs/3.jpg" alt="3" /></div><div class="item"><img  src="./imgs/1.jpg" alt="1" /></div><div class="item"><img  src="./imgs/2.jpg" alt="2" /></div><div class="item"><img  src="./imgs/3.jpg" alt="3" /></div><div class="item"><img  src="./imgs/1.jpg" alt="1" /></div><div class="item"><img  src="./imgs/2.jpg" alt="2" /></div><div class="item"><img  src="./imgs/3.jpg" alt="3" /></div><div class="item"><img  src="./imgs/1.jpg" alt="1" /></div></div>
</body>
</html>

 

相关文章：

CSS实现瀑布流的两种方式

column 多行布局实现瀑布流 1.column 实现瀑布流主要依赖两个属性。 2.column-count 属性&#xff0c;是控制屏幕分为多少列。 3.column-gap 属性&#xff0c;是控制列与列之间的距离。 <!DOCTYPE html> <html lang"en"> <head><meta charset&q…...

编程日记 2023/11/11 2:16:46

Hadoop 视频分析系统

视频分析系统 业务流程 原始数据 vedio.json {"rank":1,"title":"《逃出大英博物馆》第二集","dzl":"77.8","bfl":"523.9","zfl":"39000","type":"影视",&quo…...

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

Flutter android和ios闪屏页配置

一.概念理解 闪屏页 1.当点击app开始的一瞬间&#xff0c;所呈现出来的页面就是闪屏页。 2.为什么会有闪屏也&#xff0c;由于app启动需要加载代码&#xff0c;这个过程需要耗时&#xff0c;在没有加载完成之前&#xff0c;是看不到app真正的页面。所以app在没有完全加载完时…...

编程日记 2023/11/11 2:14:44

30道高频Vue面试题快问快答

※其他的快问快答&#xff0c;看这里&#xff01; 10道高频Qiankun微前端面试题快问快答 10道高频webpack面试题快问快答 20道高频CSS面试题快问快答 20道高频JavaScript面试题快问快答 30道高频Vue面试题快问快答 面试中的快问快答 快问快答的情景在面试中非常常见。 在面试过…...

编程日记 2023/11/11 2:13:43

vue-前端实现模糊查询

vue-前端实现模糊查询 开始觉得前端的模糊查询肯定是非常难实现的&#xff0c;但后来发现还是很容易的&#xff0c;几行代码就可以搞定。 原理 从后端获取到所有数据后&#xff0c;将数据存储于两个变量中&#xff0c;目的是为了其中一个作为模糊查询的对照组&#xff0c;用…...

编程日记 2023/11/11 2:12:42

QT:tcpSocket 报错The proxy type is invalid for this operation

调用connectToHost时会先检查代理情况。Qt 程序默认使用系统的代理设置会导致这个问题导致&#xff0c;只要关闭系统的代理设置就可以解决这个问题&#xff1a; &#xff08;1&#xff09;添加头文件&#xff1a; #include <QNetworkProxy> &#xff08;2&#xff09;添加…...

编程日记 2023/11/11 2:11:41

PostgreSQL 技术内幕(十一)位图扫描

扫描算子在上层计算和底层存储之间&#xff0c;向下扫描底层存储的数据&#xff0c;向上作为计算的输入源&#xff0c;在SQL的执行层中&#xff0c;起着关键的作用。顺序、索引、位图等不同类型的扫描算子适配不同的数据分布场景。然而&#xff0c;扫描算子背后的实现原理是怎样…...

编程日记 2023/11/11 2:10:39

C# WebSocket 服务器

*******************websocket服务器************************************** 第一步&#xff1a;创建HttpListener类&#xff0c;并启动监听&#xff1a; var listener new HttpListener(); listener.Prefixes.Add("http://10.10.13.140:8080/"); …...

编程日记 2023/11/11 2:09:38

自动化实战 - 测试个人博客系统

前言 本篇使用Selenium3Junit5对个人博客进行自动化测试&#xff0c;如有错误&#xff0c;请在评论区指正&#xff0c;让我们一起交流&#xff0c;共同进步&#xff01; 文章目录 前言一.web自动化测试用例二.测试准备1.注册界面自动化测试测试过程中遇到的Bug: 2.登录界面自动…...

编程日记 2023/11/11 2:08:32

TCP/IP详解

TCP/IP详解 一、网络基础1.TCP/IP网络分层2.IP地址和端口号3.封装与分用4.客户-服务端模型 二、链路层1.以太网IEEE802封装2.环回接口 Loopback Interface3.最大传输单元MTU和路径MTU 三、网络层 - IP1.IP首部的关键信息2.IP路由选择3.子网寻址和子网掩码4.ICMP和IGMP 四、传输…...

编程日记 2023/11/11 2:07:31

2023年的低代码：数字化、人工智能、趋势及未来展望

前言 正如许多专家预测的那样&#xff0c;低代码平台在2023年将展现更加强劲的势头。越来越多的企业正在纷纷转向低代码开发&#xff0c;他们希望能够快速开发内部应用程序&#xff0c;并在经济衰退可能出现的情况下保持灵活性。在这个大背景下&#xff0c;低代码平台为企业软件…...

编程日记 2023/11/11 2:06:26

【gogogo专栏】golang并发编程

golang并发编程 并发编程的工具goroutine介绍协程管理器sync.WaitGroup channel介绍readChannel和writeChannelclose的用法select的用法 通讯示例总结 并发编程的工具 在golang中&#xff0c;并发编程是比较简单的&#xff0c;不像java中那么麻烦&#xff0c;golang天然的支持协…...

编程日记 2023/11/11 2:05:25

深入理解JVM虚拟机第二十二篇：详解JVM当中与操作数栈相关的字节码指令

大神链接&#xff1a;作者有幸结识技术大神孙哥为好友&#xff0c;获益匪浅。现在把孙哥视频分享给大家。 孙哥链接&#xff1a;孙哥个人主页 作者简介&#xff1a;一个颜值99分&#xff0c;只比孙哥差一点的程序员 本专栏简介&#xff1a;话不多说&#xff0c;让我们一起干翻J…...

编程日记 2023/11/11 2:03:23

Vue报错解决Error in v-on handler: “Error: 无效的节点选择器：#div1“

因为我们在创建元素之前用了#div1"所有它会报错&#xff0c;解决方案简单粗暴咱们直接用 setTimeout(createEdit, 1)解决问题了 原理&#xff1a;vue的虚拟dom创建完成以后再调用真是dom就没啥问题 function createEdit() {const editor new E(#div1)editor.config.hei…...

编程日记 2023/11/11 2:02:22

R | R包安装报错-github连接速度慢或无法访问 | metaboanalystR | Retip | rJava安装

R | R包安装报错-github连接速度慢或无法访问 | metaboanalystR | Retip | rJava安装 一、metaboanalystR 安装1.1 Bioconductor报错&#xff0c;无网络连接1.2 github520-修改hosts文件 二、retip安装2.1 rJava包加载报错及安装2.2 安装Retip包 三、从Bioconductor安装Rdisop报…...

编程日记 2023/11/11 2:01:20

博阳精讯、凡得科技访问上海斯歌：共探BPM流程服务新高地

10月27日下午&#xff0c;来自博阳精讯、凡得科技的流程领域专家、领导一行参观访问了上海斯歌总部。三方举行了深度交流会谈&#xff0c;分享了彼此对流程领域的前沿洞察和技术实践&#xff0c;共同探索了BPM流程服务科技力与价值力的新高地。 本次研讨会上&#xff0c;博阳精…...

编程日记 2023/11/11 2:00:19

响应式艺术作品展示前端html网站模板源码

响应式艺术作品展示网站模板是一款适合各种艺术作品在线展示的响应式网站模板下载。提示&#xff1a;本模板调用到谷歌字体库&#xff0c;可能会出现页面打开比较缓慢。 转载自 https://www.qnziyw.cn/wysc/qdmb/23778.html...

编程日记 2023/11/11 1:59:18

大语言模型(LLM)综述(六)：大型语言模型的基准和评估

A Survey of Large Language Models 前言7 CAPACITY AND EVALUATION7.1 基本能力7.1.1 语言生成7.1.2 知识利用7.1.3 复杂推理 7.2 高级能力7.2.1 人类对齐7.2.2 与外部环境的交互7.2.3 工具操作 7.3 基准和评估方法7.3.1 综合评价基准7.3.2 评估方法 7.4 实证评估7.4.1 实验设…...

编程日记 2023/11/11 1:58:17

【Python自学笔记】Flask调教方法Internel Server Error

收到老师的小组作业任务说是写一个自动报告程序&#xff0c;用PythonSQLiteHTML实现&#xff0c;好吧。 前面没什么问题&#xff0c;打开VSCode&#xff0c;连数据库读数据处理可视化模板拼凑&#xff0c;最后调用Flask框架出网页报告的时候总报错连接不了。 但换了jinjia2的渲…...

编程日记 2023/11/11 1:57:16

【AICFD案例教程】汽车外气动-AI加速

AICFD是由天洑软件自主研发的通用智能热流体仿真软件&#xff0c;用于高效解决能源动力、船舶海洋、电子设备和车辆运载等领域复杂的流动和传热问题。软件涵盖了从建模、仿真到结果处理完整仿真分析流程&#xff0c;帮助工业企业建立设计、仿真和优化相结合的一体化流程&#x…...

编程日记 2023/11/11 1:55:13

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/2/2 21:52:33

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2026/1/4 2:33:39

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2026/2/1 22:23:58

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/8/11 1:05:59

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2026/2/4 19:47:03

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2026/2/1 8:24:29

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/9/24 12:50:07

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2026/1/26 3:45:28