CSS实现瀑布流的两种方式
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 属性，是控制屏幕分为多少列。 3.column-gap 属性，是控制列与列之间的距离。 <!DOCTYPE html> <html lang"en"> <head><meta charset&q…...
Hadoop 视频分析系统
视频分析系统 业务流程 原始数据 vedio.json {"rank":1,"title":"《逃出大英博物馆》第二集","dzl":"77.8","bfl":"523.9","zfl":"39000","type":"影视",&quo…...
Flutter android和ios闪屏页配置
一.概念理解 闪屏页 1.当点击app开始的一瞬间，所呈现出来的页面就是闪屏页。 2.为什么会有闪屏也，由于app启动需要加载代码，这个过程需要耗时，在没有加载完成之前，是看不到app真正的页面。所以app在没有完全加载完时…...
30道高频Vue面试题快问快答
※其他的快问快答，看这里！ 10道高频Qiankun微前端面试题快问快答 10道高频webpack面试题快问快答 20道高频CSS面试题快问快答 20道高频JavaScript面试题快问快答 30道高频Vue面试题快问快答 面试中的快问快答 快问快答的情景在面试中非常常见。 在面试过…...
vue-前端实现模糊查询
vue-前端实现模糊查询 开始觉得前端的模糊查询肯定是非常难实现的，但后来发现还是很容易的，几行代码就可以搞定。 原理 从后端获取到所有数据后，将数据存储于两个变量中，目的是为了其中一个作为模糊查询的对照组，用…...
QT:tcpSocket 报错The proxy type is invalid for this operation
调用connectToHost时会先检查代理情况。Qt 程序默认使用系统的代理设置会导致这个问题导致，只要关闭系统的代理设置就可以解决这个问题： （1）添加头文件： #include <QNetworkProxy> （2）添加…...
PostgreSQL 技术内幕(十一)位图扫描
扫描算子在上层计算和底层存储之间，向下扫描底层存储的数据，向上作为计算的输入源，在SQL的执行层中，起着关键的作用。顺序、索引、位图等不同类型的扫描算子适配不同的数据分布场景。然而，扫描算子背后的实现原理是怎样…...
C# WebSocket 服务器
*******************websocket服务器************************************** 第一步：创建HttpListener类，并启动监听： var listener new HttpListener(); listener.Prefixes.Add("http://10.10.13.140:8080/"); …...
自动化实战 - 测试个人博客系统
前言 本篇使用Selenium3Junit5对个人博客进行自动化测试，如有错误，请在评论区指正，让我们一起交流，共同进步！ 文章目录 前言一.web自动化测试用例二.测试准备1.注册界面自动化测试测试过程中遇到的Bug: 2.登录界面自动…...
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年的低代码：数字化、人工智能、趋势及未来展望
前言 正如许多专家预测的那样，低代码平台在2023年将展现更加强劲的势头。越来越多的企业正在纷纷转向低代码开发，他们希望能够快速开发内部应用程序，并在经济衰退可能出现的情况下保持灵活性。在这个大背景下，低代码平台为企业软件…...
【gogogo专栏】golang并发编程
golang并发编程 并发编程的工具goroutine介绍协程管理器sync.WaitGroup channel介绍readChannel和writeChannelclose的用法select的用法 通讯示例总结 并发编程的工具 在golang中，并发编程是比较简单的，不像java中那么麻烦，golang天然的支持协…...
深入理解JVM虚拟机第二十二篇：详解JVM当中与操作数栈相关的字节码指令
大神链接：作者有幸结识技术大神孙哥为好友，获益匪浅。现在把孙哥视频分享给大家。 孙哥链接：孙哥个人主页 作者简介：一个颜值99分，只比孙哥差一点的程序员 本专栏简介：话不多说，让我们一起干翻J…...
Vue报错解决Error in v-on handler: “Error: 无效的节点选择器：#div1“
因为我们在创建元素之前用了#div1"所有它会报错，解决方案简单粗暴咱们直接用 setTimeout(createEdit, 1)解决问题了 原理：vue的虚拟dom创建完成以后再调用真是dom就没啥问题 function createEdit() {const editor new E(#div1)editor.config.hei…...
R | R包安装报错-github连接速度慢或无法访问 | metaboanalystR | Retip | rJava安装
R | R包安装报错-github连接速度慢或无法访问 | metaboanalystR | Retip | rJava安装 一、metaboanalystR 安装1.1 Bioconductor报错，无网络连接1.2 github520-修改hosts文件 二、retip安装2.1 rJava包加载报错及安装2.2 安装Retip包 三、从Bioconductor安装Rdisop报…...
博阳精讯、凡得科技访问上海斯歌：共探BPM流程服务新高地
10月27日下午，来自博阳精讯、凡得科技的流程领域专家、领导一行参观访问了上海斯歌总部。三方举行了深度交流会谈，分享了彼此对流程领域的前沿洞察和技术实践，共同探索了BPM流程服务科技力与价值力的新高地。 本次研讨会上，博阳精…...
响应式艺术作品展示前端html网站模板源码
响应式艺术作品展示网站模板是一款适合各种艺术作品在线展示的响应式网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。 转载自 https://www.qnziyw.cn/wysc/qdmb/23778.html...
大语言模型(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 实验设…...
【Python自学笔记】Flask调教方法Internel Server Error
收到老师的小组作业任务说是写一个自动报告程序，用PythonSQLiteHTML实现，好吧。 前面没什么问题，打开VSCode，连数据库读数据处理可视化模板拼凑，最后调用Flask框架出网页报告的时候总报错连接不了。 但换了jinjia2的渲…...
【AICFD案例教程】汽车外气动-AI加速
AICFD是由天洑软件自主研发的通用智能热流体仿真软件，用于高效解决能源动力、船舶海洋、电子设备和车辆运载等领域复杂的流动和传热问题。软件涵盖了从建模、仿真到结果处理完整仿真分析流程，帮助工业企业建立设计、仿真和优化相结合的一体化流程&#x…...
网络编程（Modbus进阶）
思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...
以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：
一、属性动画概述NETX 作用：实现组件通用属性的渐变过渡效果，提升用户体验。支持属性：width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项： 布局类属性（如宽高）变化时&#…...
练习（含atoi的模拟实现,自定义类型等练习）
一、结构体大小的计算及位段 （结构体大小计算及位段 详解请看：自定义类型：结构体进阶-CSDN博客） 1.在32位系统环境，编译选项为4字节对齐，那么sizeof(A)和sizeof(B)是多少？ #pragma pack(4)st…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集，包含8种湿地亚类，该数据以0.5X0.5的瓦片存储，我们整理了所有属于中国的瓦片名称与其对应省份，方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验
系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
C# SqlSugar：依赖注入与仓储模式实践
C# SqlSugar：依赖注入与仓储模式实践 在 C# 的应用开发中，数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护，许多开发者会选择成熟的 ORM（对象关系映射）框架，SqlSugar 就是其中备受…...
C#学习第29天：表达式树（Expression Trees）
目录 什么是表达式树？ 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持： 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...