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

CSS实现瀑布流的两种方式

news 2026/4/21 19:10:33

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

SymPyBotics实战：如何为你的Scara或Delta机器人快速生成最小惯性参数集？

SymPyBotics实战&#xff1a;Scara与Delta机器人最小惯性参数集生成指南 在机器人动力学参数辨识领域&#xff0c;工程师们常常面临一个核心挑战&#xff1a;如何从复杂的全参数模型中提取出真正影响系统行为的核心参数集&#xff1f;这个问题对于Scara和Delta这类高速精密机器…...

编程新知 2026/4/21 18:55:32

DeepSeek-OCR-2应用场景：跨境电商产品说明书多语言OCR翻译预处理

DeepSeek-OCR-2应用场景&#xff1a;跨境电商产品说明书多语言OCR翻译预处理 1. 引言&#xff1a;跨境电商的文档处理难题 如果你在跨境电商行业工作过&#xff0c;一定遇到过这样的场景&#xff1a;公司要上线一款新产品到海外市场&#xff0c;产品说明书有几十页&#xff0…...

编程新知 2026/4/21 18:48:22

3分钟搞定Windows安卓驱动：最新ADB/Fastboot一键安装全攻略

3分钟搞定Windows安卓驱动&#xff1a;最新ADB/Fastboot一键安装全攻略 【免费下载链接】Latest-adb-fastboot-installer-for-windows A Simple Android Driver installer tool for windows (Always installs the latest version) 项目地址: https://gitcode.com/gh_mirrors/…...

编程新知 2026/4/21 17:27:42

JSONEditor完整教程：轻松掌握JSON可视化编辑的终极指南

JSONEditor完整教程&#xff1a;轻松掌握JSON可视化编辑的终极指南 【免费下载链接】jsoneditor A web-based tool to view, edit, format, and validate JSON 项目地址: https://gitcode.com/gh_mirrors/js/jsoneditor JSON数据在现代Web开发中无处不在&#xff0c;无论…...

编程新知 2026/4/21 16:45:32

用FPGA和Verilog实现一个浪漫的8路呼吸流水灯（基于有限状态机FSM设计）

用FPGA和Verilog打造浪漫呼吸流水灯&#xff1a;有限状态机的艺术实践 当冰冷的电子元件遇上温暖的光效设计&#xff0c;FPGA开发便从枯燥的实验室走进了生活美学领域。本文将带你用Verilog硬件描述语言&#xff0c;基于有限状态机(FSM)设计一个具有呼吸渐变效果的8路LED流水灯…...

编程新知 2026/4/21 15:50:02

已解决Spring Cloud 2022+中FeignClient启动报错：No Feign Client for loadBalancing defined

1. 问题现象与错误分析 最近在升级到Spring Cloud 2022.0.x和Spring Boot 3.x后&#xff0c;很多开发者都遇到了一个典型的启动报错&#xff1a;"No Feign Client for loadBalancing defined"。这个错误通常发生在服务启动阶段&#xff0c;控制台会打印出一长串的依赖…...

编程新知 2026/4/21 15:09:40

为什么VirtualBrowser是web3空投的必备工具：完整隐私保护解决方案

为什么VirtualBrowser是web3空投的必备工具&#xff1a;完整隐私保护解决方案 【免费下载链接】VirtualBrowser Free anti fingerprint browser, 指纹浏览器, 隐私浏览器, 防识别浏览器, 反识别浏览器, 防关联浏览器, 免费的web3空投专用指纹浏览器 https://virtualbrowser.cc/…...

编程新知 2026/4/21 14:12:51

暗黑3终极自动化指南：D3KeyHelper图形化宏工具5分钟快速上手教程

暗黑3终极自动化指南&#xff1a;D3KeyHelper图形化宏工具5分钟快速上手教程 【免费下载链接】D3keyHelper D3KeyHelper是一个有图形界面&#xff0c;可自定义配置的暗黑3鼠标宏工具。 项目地址: https://gitcode.com/gh_mirrors/d3/D3keyHelper D3KeyHelper是一款免费开…...

编程新知 2026/4/21 13:16:01

星链4SAPI中转枢纽深度技术解构：架构优势、工程实践与演进脉络

在当下的技术圈层中&#xff0c;围绕大模型接口调用、API密钥管理与中转网关的讨论热度居高不下。几乎每隔一段时间&#xff0c;就会有关于“黑盒优化”或“算力调度霸权”的新观点浮现。这背后的技术实体——星链4SAPI所代表的模型接口聚合层&#xff0c;正成为开发者工具链中…...

编程新知 2026/4/21 12:17:54

LabVIEW颜色识别实战：用IMAQ ColorMatch函数5分钟搞定产品颜色分拣

LabVIEW工业级颜色分拣系统实战&#xff1a;从参数调优到产线部署全解析 在一条高速运转的自动化生产线上&#xff0c;不同颜色的零件正以每秒3个的速度通过传送带。传统人工分拣不仅效率低下&#xff0c;误差率更是高达15%。而借助LabVIEW的IMAQ视觉工具包&#xff0c;我们仅用…...

编程新知 2026/4/21 11:02:21