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…...
JavaSec-RCE
简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性，…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted（）是OpenCV库中用于图像处理的函数，主要功能是将两个输入图像（尺寸和类型相同）按照指定的权重进行加权叠加（图像融合），并添加一个标量值&#x…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码，专为学校招生场景量身打造，功能实用且操作便捷。 从技术架构来看，ThinkPHP提供稳定可靠的后台服务，FastAdmin加速开发流程，UniApp则保障小程序在多端有良好的兼…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2
每日一言 今天的每一份坚持，都是在为未来积攒底气。 案例：OLED显示一个A 这边观察到一个点，怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 ： 如果代码里信号切换太快（比如 SDA 刚变，SCL 立刻变&#…...
Linux 内存管理实战精讲：核心原理与面试常考点全解析
Linux 内存管理实战精讲：核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用，还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...
招商蛇口 | 执笔CID，启幕低密生活新境
作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...
深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
Java设计模式：责任链模式
一、什么是责任链模式？ 责任链模式（Chain of Responsibility Pattern） 是一种 行为型设计模式，它通过将请求沿着一条处理链传递，直到某个对象处理它为止。这种模式的核心思想是 解耦请求的发送者和接收者，…...