css实现瀑布流布局

devtools/2024/12/22 10:54:07/

瀑布流布局也可以通过纯CSS来实现,使用CSS的column属性可以实现多列布局。下面是一个使用纯CSS实现瀑布流布局的示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流布局</title>
<style>.waterfall {column-count: 4;column-gap: 10px;}.item {break-inside: avoid-column;margin-bottom: 10px;}.item img {width: 100%;display: block;}
</style>
</head>
<body>
<div class="waterfall"><div class="item"><img src="https://via.placeholder.com/150" alt=""></div><div class="item"><img src="https://via.placeholder.com/200" alt=""></div><div class="item"><img src="https://via.placeholder.com/250" alt=""></div><div class="item"><img src="https://via.placeholder.com/300" alt=""></div><div class="item"><img src="https://via.placeholder.com/350" alt=""></div><div class="item"><img src="https://via.placeholder.com/400" alt=""></div><div class="item"><img src="https://via.placeholder.com/450" alt=""></div><div class="item"><img src="https://via.placeholder.com/500" alt=""></div>
</div>
</body>
</html>

 

在这个示例中,我们使用CSS的column-count属性将.waterfall容器分为4列,使用column-gap属性设置列与列之间的间距。然后通过break-inside: avoid-column属性确保.item元素不会被分割到两列之间。最后,设置.item img元素的宽度为100%以确保图片占满整个列,并设置display: block以消除图片之间的空隙。

通过这种方式,我们可以实现一个简单的瀑布流布局,不需要额外的JavaScript代码。你可以根据实际需求调整列数、间距和元素样式等来实现不同的效果。


http://www.ppmy.cn/devtools/31500.html

相关文章

论文笔记(四十五)Attention Is All You Need

Attention Is All You Need 文章概括摘要1. 介绍2. 背景3. 模型架构3.1 编码器和解码器堆栈3.2 Attention3.2.1 按比例点积Attention3.2.2 Multi-Head Attention3.2.3 注意力在模型中的应用 3.3 定位前馈网络3.4 嵌入与 Softmax3.5 位置编码 4 为什么 Self-Attention5. Trainin…

python:用 mido 生成 midi文件,用 pygame 播放 mid文件

pip install mido Downloading mido-1.3.2-py3-none-any.whl (54 kB) Downloading packaging-23.2-py3-none-any.whl (53 kB) Installing collected packages: packaging, mido Successfully installed mido-1.3.2 packaging-23.2 mido 官网文档 pip intall pygame pygame…

C语言阶段性测试错题纠正与拓展

引言&#xff1a;在2024年4月26日&#xff0c;我进行了C语言知识的“期末考试”。通过这次考试&#xff0c;我发现了我的知识漏洞。所以&#xff0c;我写下这篇博客来记录我的错题&#xff0c;并进行纠正&#xff0c;然后对于以前遗忘知识的回顾。 更多有关C语言的知识详解可前…

解释Java的反射API,以及它的用途

Java 的反射 API 提供了一种机制&#xff0c;允许在运行时&#xff08;Run-Time&#xff09;查询或操作类和对象的信息。通过反射&#xff0c;程序能够动态地&#xff08;在执行期间&#xff09;访问 Java 类的属性和方法&#xff0c;包括私有成员&#xff08;private fields a…

vue3 + ts 快速入门(全)

文章目录 学习链接1. Vue3简介1.1. 性能的提升1.2.源码的升级1.3. 拥抱TypeScript1.4. 新的特性 2. 创建Vue3工程2.1. 基于 vue-cli 创建2.2. 基于 vite 创建&#xff08;推荐&#xff09;vite介绍创建步骤项目结构安装插件项目结构总结 2.3. 一个简单的效果Person.vueApp.vue …

Java_JVM_JVMs

JVM 官方文档说明文档目录 官方文档 JVM Specification 说明 以Java SE 17为标准 文档目录 2&#xff1a;JVM 结构 class文件数据类型 基本数据类型引用数据类型 运行时数据区 栈帧 其他内容 对象的表示浮点数运算特殊方法 初始化方法【实例、类】多态方法 3&#xff…

「 网络安全常用术语解读 」SBOM主流格式CycloneDX详解

CycloneDX是软件供应链的现代标准。CycloneDX物料清单&#xff08;BOM&#xff09;可以表示软件、硬件、服务和其他类型资产的全栈库存。该规范由OWASP基金会发起并领导&#xff0c;由Ecma International标准化&#xff0c;并得到全球信息安全界的支持&#xff0c;如今CycloneD…

MYSQL从入门到精通(二)

1、MYSQL高级概述 【1】架构概述 【2】索引优化 【3】查询截取 【4】mysql锁机制 【5】主从复制 2、MYSQL概述 【1】mysql内核 【2】sql优化工程师 【3】mysql服务器的优化 【4】各种参数常量设定 【5】查询语句优化 【6】主从复制 【7】软硬件升级 【8】容灾百分 【9】sql编…