css实现瀑布流布局

瀑布流布局也可以通过纯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.mzph.cn/bicheng/6183.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一个注解完美实现分布式锁(AOP)

前言 学习过Spring的小伙伴都知道AOP的强大&#xff0c;本文将通过Redisson结合AOP&#xff0c;仅需一个注解就能实现分布式锁。 &#x1f36d; 不会使用aop和redisson的小伙伴可以参考&#xff1a; 【学习总结】使Aop实现自定义日志注解-CSDN博客 【学习总结】使用分布式锁和…

Apache Kafka知识点表格总结

之前的项目中用到RabbitMQ比较多&#xff0c;也有用到RocketMQ,&#xff0c;虽然项目中没有用到过Kafka&#xff0c;不过自己在空闲时间学习过,而且在面试中也会问到&#xff0c;因为还是有不少公司用到Kafka&#xff0c;所以做个总结&#xff0c;一方面是做为面试参考&#xf…

深度探析拒绝服务攻击及其防御

目录 前言 1. 概述 2. 剧毒包型拒绝服务攻击 3. 风暴型拒绝服务攻击 4. 拒绝服务攻击的原因 5. 拒绝服务攻击的检测及响应技术 6. 实例 总结 前言 随着互联网的普及和依赖程度的增加&#xff0c;网络安全问题变得日益突出。其中&#xff0c;拒绝服务攻击&#xff08;Den…

CSS 鼠标经过放大元素 不影响其他元素

效果 .item:hover{transform: scale(1.1); /* 鼠标悬停时将元素放大 1.1 倍 */ }.item{transition: transform 0.3s ease; /* 添加过渡效果&#xff0c;使过渡更加平滑 */ }

【研发日记】Matlab/Simulink避坑指南(十一)——Delay周期Bug

文章目录 前言 背景介绍 问题描述 分析排查 解决方案 总结归纳 前言 见《研发日记&#xff0c;Matlab/Simulink避坑指南(六)——字节分割Bug》 见《研发日记&#xff0c;Matlab/Simulink避坑指南(七)——数据溢出钳位Bug》 见《研发日记&#xff0c;Matlab/Simulink避坑指…

MMDetection目标检测框架推理与参数量计算

模型推理 在使用MMDetection框架完成训练后便可以使用训练所得的权重文件进行推理了&#xff0c;具体可以使用MMDetection文件下的demo文件夹的image_demo.py文件。 from argparse import ArgumentParser from mmengine.logging import print_log from mmdet.apis import Det…

CSS-IN-JS Emotion

为什么会有css-in-js 优点 缺点 使用emotion插件库 npm i emotion/core emotion/styled使用时需要解析css属性 使用方式一&#xff1a; 通过注释告诉babel不讲jsx转化为react.create Element的调用&#xff0c;而是转化为jsx语法。会导致一个警告react未使用。 使用方式二&am…

Redis__三大日志

文章目录 &#x1f60a; 作者&#xff1a;Lion J &#x1f496; 主页&#xff1a; https://blog.csdn.net/weixin_69252724 &#x1f389; 主题&#xff1a;Redis__三大日志 ⏱️ 创作时间&#xff1a;2024年04月30日 ———————————————— 对于MySQL来说, 有…

ShellScript脚本编程(一)

什么是Shell Shell 是一个用 C 语言编写的程序&#xff0c;它是用户使用 Linux 的桥梁。Shell 既是一种命令语言&#xff0c;又是一种程序设计语言 Shell 是指一种应用程序&#xff0c;这个应用程序提供了一个界面&#xff0c;用户通过这个界面访问操作系统内核的服务 为什么…

设计模式-02 设计模式-工厂模式factory

设计模式-02 设计模式-工厂模式factory 1.定义 工厂模式是一种创建型设计模式&#xff0c;它定义了一个创建对象的接口&#xff0c;让子类决定实例化哪一个类。 工厂模式使程序不必指定要创建产品的具体类&#xff0c;从而解耦应用程序与实际创建产品的具体类。 工厂模式提供…

drop、delete与truncate的区别

在数据库管理系统&#xff08;如SQL&#xff09;中&#xff0c;DROP、DELETE和TRUNCATE是用于删除数据的不同命令&#xff0c;区别主要体现在删除的对象和方式以及对数据库事务日志的影响&#xff1a; DELETE: 用于删除表中的一行、多行或所有行。可以配合WHERE子句来指定删除的…

Themis新篇章:老牌衍生品协议登陆Blast L2,探索全新经济模型

本文将深入分析 Themis 的最新经济模型&#xff0c;探讨其核心概念和机制、优势与创新之处、风险与挑战。 一、引言 随着区块链技术的不断发展&#xff0c;DeFi 衍生品项目逐渐成为市场的焦点。而用户体验的革新&#xff0c;进一步的金融创新&#xff0c;去中心化治理方案的优…

SpringCloud整合Gateway结合Nacos

目录 一、引入依赖 二、开启两个测试项目 2.1 order service ​编辑 2.2 user service 三、gateway项目 3.1 新建一个bootstrap.yml文件 3.2 将我们的的网关配置写道nacos里的配置里 3.3 测试&#xff1a;看能够根据网关路由到两个测试的项目 四、 优化 4.1 将项目打包…

字节跳动发起AI战争 寻找下一个TikTok

现如今在字节跳动&#xff0c;已近乎隐退的张一鸣&#xff0c;只重点关注两件事&#xff1a;其一&#xff0c;是风暴中的TikTok&#xff1b;其二&#xff0c;就是字节跳动正在全力追赶的AI战略业务。 提及字节的AI战略远望,多个接近字节的人士均认为,以Flow部门出品最为“正统…

JavaScript中的防抖(Debounce)和节流(Throttle):作用与使用方式

目录 引言 防抖&#xff08;Debounce&#xff09; 作用 使用方式 节流&#xff08;Throttle&#xff09; 作用 使用方式 总结 引言 在前端开发中&#xff0c;我们经常会遇到需要处理高频触发的事件&#xff0c;如窗口大小调整、输入框内容变化、滚动事件等。这些事件在…

pthread线程相关

LWP :轻量级 进程&#xff0c;本质仍是进程 进程 &#xff1a;独立地址空间&#xff0c;拥有PCB 线程&#xff1a;有独立的TCB&#xff0c;但没有独立的地址空间&#xff08;共享&#xff09; 区别 &#xff1a;在与是否共享地址文件 进程 &#xff08;独居&#xff09;&am…

数据结构:最小生成树(Prim算法和Kruskal算法)、图的最短路径(Dijkstra算法和Bellman-Ford算法)

什么是最小生成树&#xff1f;Prim算法和Kruskal算法是如何找到最小生成树的&#xff1f; 最小生成树是指在一个连通图中&#xff0c;通过连接所有节点并使得总权重最小的子图。 Prim算法和Kruskal算法是两种常用的算法&#xff0c;用于寻找最小生成树。 Prim算法的步骤如下&…

文件API及其操作

这里介绍两类文件操作、三个文件类。包括文件系统操作&#xff08;File类&#xff09;、文件内容操作&#xff08;操作字节流、操作字符流&#xff09; 1.文件类File 1.1.认识File类 &#xff08;1&#xff09;什么是File类呢&#xff1f;其实就是可以操作文件的一个类。通过…

C# dateTimePicker控件存取数据库问题

存入数据库时&#xff0c;先设置&#xff0c; dateTimePicker1.Format DateTimePickerFormat.Custom; dateTimePicker1.CustomFormat "yyyy-MM-dd HH:mm:ss"; 然后&#xff0c;dateTimePicker1.Text 就和textBox1.Text一样方式存入数据库&#xff1b;…

结构化开发中耦合和内聚的类型

一、耦合 1、无直接耦合。指两个模块之间没有直接的关系&#xff0c;它们分别从属于不同模块的控制与调用&#xff0c;它们之间不传递任何信息。因此&#xff0c;模块间耦合性最弱&#xff0c;模块独立性最高。 2、数据耦合。指两个模块之间有调用关系&#xff0c;传递的是简单…