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

用css实现瀑布流布局

news 来源：原创 2025/7/16 16:48:29

上效果

知识理解

column-count: 4; column-gap: 15px;实现固定四行瀑布流布局

columns: 200px auto;column-gap: 15px;由浏览器根据容器的宽度自动调整，尽可能一行多个200px宽度的列数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>瀑布流布局示例</title><style>.container {/* 设置列间距 */column-gap: 15px;/* column-count: 4; 固定列数 *//* 设置列宽和列数（列的数量由浏览器根据容器的宽度自动调整） *//* 设置列数 */columns: 300px auto;/* 禁用文本选择 */user-select: none;}.item {/* break-inside 用于控制元素是否可以在页面、列或区域的边界处被分割 *//* 当设置为 avoid 时，浏览器会尝试避免将元素的内容分割到不同的页面、列或区域中。这意味着整个元素内容尽可能保持在同一页面、列或区域内 */break-inside: avoid;/*  Safari 浏览器 */-webkit-column-break-inside: avoid;/*老版本浏览器 用于控制元素是否可以在页面、列或区域的边界处被分割*/page-break-inside: avoid;margin-bottom: 15px;}.item img {width: 100%;border-radius: 8px;display: block;}</style>
</head><body><div id="app"><div class="container"><div class="item" v-for="(item, index) in list" :key="index"><img :src="`https://picsum.photos/${item}`" alt="随机图片"></div></div></div><!-- 引入Vue库 --><script src="https://cdn.jsdelivr.net/npm/vue@2"></script><script>const app=new Vue({el: '#app',data () {return {list: ["290/320","190/370","290/330","250/410","230/380","260/370","210/430","290/310","430/310","390/440","430/310","390/440","390/440",]};}});</script>
</body></html>

相关文章：

用css实现瀑布流布局

上效果 知识理解 column-count: 4; column-gap: 15px;实现固定四行瀑布流布局 columns: 200px auto;column-gap: 15px;由浏览器根据容器的宽度自动调整&#xff0c;尽可能一行多个200px宽度的列数 <!DOCTYPE html> <html lang"en"><head><me…...

编程日记 2025/7/16 16:48:29

Spring Bean required a single bean, but 2 were found，发现多个 Bean

问题复现 在使用 Autowired 时&#xff0c;不管你是菜鸟级还是专家级的 Spring 使用者&#xff0c;都应该制造或者遭遇过类似的错误&#xff1a; required a single bean, but 2 were found 顾名思义&#xff0c;我们仅需要一个 Bean&#xff0c;但实际却提供了 2 个&#xff…...

编程日记 2025/7/15 21:42:33

用 Python 从零开始创建神经网络（十八）：模型对象（Model Object）

模型对象&#xff08;Model Object&#xff09; 引言到目前为止的完整代码&#xff1a; 引言 我们构建了一个可以执行前向传播、反向传播以及精度测量等辅助任务的模型。通过编写相当多的代码并在一些较大的代码块中进行修改&#xff0c;我们实现了这些功能。此时&#xff0c;…...

编程日记 2025/7/14 4:48:10

Springboot 升级带来的Swagger异常

当升级到Springboot 2.6.0 以上的版本后&#xff0c;Swagger 就不能正常工作了, 启动时报如下错误。当然如果你再使用sping boot Actuator 和 Springfox, 也会引起相关的NPE error. (github issue: https://github.com/springfox/springfox/issues/3462) NFO | jvm 1 | 2022/04…...

编程日记 2025/7/14 7:50:51

【蓝桥杯研究生组】第15届Java试题答案整理

D 题 试题 D: 商品库存管理 时间限制: 3.0s 内存限制: 512.0MB 本题总分&#xff1a;10 分 【问题描述】 在库存管理系统中&#xff0c;跟踪和调节商品库存量是关键任务之一。小蓝经营的仓库中存有多种商品&#xff0c;这些商品根据类别和规格被有序地分类并编号&#xff0c;…...

编程日记 2025/7/14 1:32:35

数据结构(链式栈)

链式栈 链式栈&#xff08;Linked Stack&#xff09;是一种基于链表的数据结构&#xff0c;用于实现栈&#xff08;后进先出&#xff0c;LIFO&#xff09;的特性。与基于数组的栈不同&#xff0c;链式栈通过动态分配内存来存储数据&#xff0c;这使得它更加灵活&#xff0c;能…...

编程日记 2025/7/14 20:07:42

《代码随想录》Day22打卡！

回溯算法 《代码随想录》回溯算法&#xff1a;组合 本题完整题目如下&#xff1a; 本题的完整思路如下&#xff1a; 1.本题使用回溯算法&#xff0c;其实回溯和递归是一样的道理&#xff0c;也是分为三步曲进行&#xff1a; 2.第一步&#xff1a;确定递归函数的返回值和参数&…...

编程日记 2025/7/13 20:46:14

NetSuite Formula(HTML)超链打开Transaction

当Saved Search作为Sublist应用在Form时&#xff0c;如果Document Number是Group过的&#xff0c;则会出现如下超链失效的情况。 解决办法&#xff1a; 可以利用Saved Search中的Formula&#xff08;HTML&#xff09;功能来构建超链&#xff0c;用于打开Transaction。 以下图…...

编程日记 2025/7/13 14:13:58

传统听写与大模型听写比对

在快节奏的现代生活中&#xff0c;听写技能仍然是学习语言和提升认知能力的重要环节。然而&#xff0c;传统的听写练习往往枯燥乏味&#xff0c;且效率不高。现在&#xff0c;随着人工智能技术的发展&#xff0c;大模型听写工具的问世&#xff0c;为传统听写带来了革命性的变革…...

编程日记 2025/7/12 14:55:54

本地快速推断的语言模型比较：Apple MLX、Llama.cpp与Hugging Face Candle Rust

本地快速推断的语言模型比较&#xff1a;Apple MLX、Llama.cpp与Hugging Face Candle Rust 在自然语言处理&#xff08;NLP&#xff09;部署中&#xff0c;推断速度是一个关键因素&#xff0c;尤其是对于支持大型语言模型&#xff08;LLM&#xff09;的应用来说。随着Apple M1…...

编程日记 2025/7/13 1:12:48

Tomcat调优相关理解

什么是QPS&#xff1f; 是Queries Per Second 的缩写&#xff0c;是指服务器每秒查询数&#xff0c;比如定义一个a接口&#xff0c;该接口是10QPS&#xff0c;那么就是指该接口每秒可以处理10个请求 springboot默认并发处理数是多少&#xff1f; springboot并发处理要看serv…...

编程日记 2025/7/14 1:32:37

python爬虫--小白篇【selenium自动爬取文件】

一、问题描述 在学习或工作中需要爬取文件资源时&#xff0c;由于文件数量太多&#xff0c;手动单个下载文件效率低&#xff0c;操作麻烦&#xff0c;采用selenium框架自动爬取文件数据是不二选择。如需要爬取下面网站中包含的全部pdf文件&#xff0c;并将其转为Markdown格式。…...

编程日记 2025/7/13 11:07:55

Flink读写Kafka（DataStream API）

在Flink里，已经预定义了kafka connector，使用该connector我们可以读写kafka，并且能实现exactly once的语义。 要使用需要引入相关的maven依赖，在这里，因为读写kafka，就会涉及一个问题，kafka-client和broker的版本兼容问题，不过因为kafka client和broker的双向兼容的良…...

编程日记 2025/7/10 23:17:22

活动预告 | Microsoft 安全在线技术公开课：通过扩展检测和响应抵御威胁

课程介绍 通过 Microsoft Learn 免费参加 Microsoft 安全在线技术公开课&#xff0c;掌握创造新机遇所需的技能&#xff0c;加快对 Microsoft Cloud 技术的了解。参加我们举办的“通过扩展检测和响应抵御威胁”技术公开课活动&#xff0c;了解如何更好地在 Microsoft 365 Defen…...

编程日记 2025/7/11 15:02:51

nginx核心配置文件及常用功能

华子目录 配置文件说明配置文件格式说明nginx配置文件中的变量默认nginx.conf配置文件格式说明main全局配置events配置段 nginx配置中的root和aliaslocation用法详解虚拟主机配置nginx账户认证功能nginx自定义错误页面nginx自定义日志 配置文件说明 nginx官方帮助文档&#xf…...

编程日记 2025/7/15 22:09:58

基于AT89C51单片机的可暂停八路抢答器设计

点击链接获取Keil源码与Project Backups仿真图&#xff1a; https://download.csdn.net/download/qq_64505944/90196607?spm1001.2014.3001.5503 C15 部分参考设计如下&#xff1a; 摘要 随着社会进步和科技发展&#xff0c;电子设备在各类活动中的应用日益普遍&#xff0c…...

编程日记 2025/7/14 7:59:13

github加速源配置

访问github速度很慢&#xff1f; 试试一下方法 1&#xff1a; 编辑配置 vim /etc/docker/daemon.json 2&#xff1a;都复制粘贴上 { "registry-mirrors": [ "https://docker.211678.top", "https://docker.1panel.live…...

编程日记 2025/7/16 1:55:34

骑行解压：身心的奇妙之旅，VELO Angel Revo坐垫

在快节奏的都市生活中&#xff0c;骑行不仅是一种健康的生活方式&#xff0c;更是一种心灵的释放。从心理生理学的角度来看&#xff0c;骑行能够促使身体分泌内啡肽&#xff0c;带来愉悦感&#xff0c;同时&#xff0c;它还能转移注意力&#xff0c;缓解焦虑。在这场身心的奇妙…...

编程日记 2025/7/13 21:17:00

（七）- plane/crtc/encoder/connector objects

1&#xff0c;framebuffer/plane Rockchip RK3399 - DRM framebuffer、plane基础知识 - 大奥特曼打小怪兽 - 博客园 2&#xff0c;crtc Rockchip RK3399 - DRM crtc基础知识 - 大奥特曼打小怪兽 - 博客园 3&#xff0c;encoder/connector/bridge Rockchip RK3399 - DRM en…...

编程日记 2025/7/4 18:38:57

从零开始：如何在 .NET Core 中优雅地读取和管理配置文件

在.net中的配置文件系统支持丰富的配置源&#xff0c;包括文件(json、xml、ini等)、注册表、环境变量、命令行、Azure Key Vault等&#xff0c;还可以配置自定义配置源并跟踪配置的改变&#xff0c;然后按照优先级进行覆盖&#xff0c;总之对文件的配置有很多方法&#xff0c;这…...

编程日记 2025/7/14 13:05:19

Python中PDF转Word的技术

Python PDF转Word技术概述 在日常办公和数据处理中&#xff0c;经常需要将PDF文档转换为Word文档&#xff0c;以便进行编辑、修改或格式调整。Python作为一种强大的编程语言&#xff0c;提供了多种库和工具来实现这一功能。以下是对Python中PDF转Word技术的详细介绍。 一、技…...

编程日记 2025/7/8 5:22:39

挑战春招找到java后端实习第一天（1.1）

八股文 1.java中有哪些集合类请简单介绍一下 集合类分为两大类Collection和Map。前者是对象的集合&#xff0c;后者是键值对。 Collection分为List&#xff0c;Set&#xff0c;Queue三个接口。 List有LinkedList&#xff0c;ArrayList&#xff0c;Vector Set&#xff08;不…...

编程日记 2025/7/14 5:16:56

leetcode hot 小偷

class Solution(object):def rob(self, nums):""":type nums: List[int]:rtype: int"""# 使用动态规划&#xff0c;把之前的给保存起来ans[0,nums[-1]]for i in range(1,len(nums)):ans.append(max(ans[-1],ans[-2]nums[-1*i-1]))return ans[-1]…...

编程日记 2025/7/15 12:24:46

一、Git与GitHub基础说明

Git与GitHub Git与GitHub一、Git1定义2核心功能(1) 版本控制(2) 分支管理(3) 合并操作 二、GitHub1定义2核心功能(1)远程仓库托管(2)Pull Requests&#xff08;拉取请求&#xff09;(3) Issue Tracking&#xff08;问题跟踪&#xff09;(4) 团队管理(5) 社交功能(6)个人资料和贡…...

编程日记 2025/7/12 7:33:06

Unity-Mirror网络框架-从入门到精通之Room示例

文章目录 前言Room示例场景设置NetworkRoomManagerSpawnerRewardRoomPlayerGamePlayer 最后 前言 在现代游戏开发中&#xff0c;网络功能日益成为提升游戏体验的关键组成部分。Mirror是一个用于Unity的开源网络框架&#xff0c;专为多人游戏开发设计。它使得开发者能够轻松实现…...

编程日记 2025/7/15 10:21:13

httpslocalhostindex 配置的nginx，一刷新就报404了

当你的Nginx配置导致页面刷新时报404错误时&#xff0c;通常是由于以下几个原因造成的&#xff1a; 静态文件路径配置错误&#xff1a;Nginx没有正确地指向静态文件的目录。前端路由问题&#xff1a;如果是SPA&#xff08;单页应用&#xff09;&#xff0c;刷新页面时Nginx没有…...

编程日记 2025/7/15 21:07:26

Java重要面试名词整理（十九）：Seata

文章目录 分布式事务概述实现思路&#xff1a;两阶段提交协议(2PC) SeataSeata的三大角色Seata的生命周期Seata解决方案 AT模式一阶段二阶段 XA模式TCC模式如何处理空回滚如何处理幂等如何处理悬挂 SAGA模式四种模式对比 分布式事务概述 在微服务架构中&#xff0c;完成某一个…...

编程日记 2025/7/9 5:02:16

OpenCV和PyQt的应用

1.创建一个 PyQt 应用程序&#xff0c;该应用程序能够&#xff1a; 使用 OpenCV 加载一张图像。在 PyQt 的窗口中显示这张图像。提供四个按钮&#xff08;QPushButton&#xff09;&#xff1a; 一个用于将图像转换为灰度图一个用于将图像恢复为原始彩色图一个用于将图像进行翻…...

编程日记 2025/7/14 1:32:37

【Linux】进程间通信（一）

目录 一、进程间通信1.1 进程间通信目的1.2 理解进程间通信1.3 进程间通信发展1.4 进程间通信分类 二、管道2.1 什么是管道2.2 管道的原理2.3 匿名管道2.3.1 pipe函数2.3.2 匿名管道的实现2.3.3 匿名管道小结2.3.3.1 匿名管道的四种情况2.3.3.2 匿名管道的五种特性 2.3.4 匿名管…...

编程日记 2025/7/10 18:32:01

Fama MacBeth两步法与多因子模型的回归检验

Fama MacBeth两步法与多因子模型的回归检验 – 潘登同学的因子投资笔记 本文观点来自最近学习的石川老师《因子投资&#xff1a;方法与实践》一书 文章目录 Fama MacBeth两步法与多因子模型的回归检验 -- 潘登同学的因子投资笔记 多因子回归检验时序回归检验截面回归检验Fama–…...

编程日记 2025/7/15 13:30:46

Postman[4] 环境设置

作用&#xff1a;不同的环境可以定义不同的参数&#xff0c;在运行请求时可以根据自己的需求选择需要的环境 1.创建Environment 步骤&#xff1a; Environment-> ->命名->添加环境变量 2.使用Environment 步骤&#xff1a;Collection- >右上角选择需要的环境...

编程日记 2025/7/14 8:05:49

【paddle】初次尝试

张量 张量是 paddlepaddle&#xff0c; torch&#xff0c; tensorflow 等 python 主流机器学习包中唯一通货变量&#xff0c;因此应当了解其基本的功能。 张量 paddle.Tensor 与 numpy.array 的转化 import paddle as paddle import matplotlib.pyplot as plt apaddle.to_t…...

编程日记 2025/7/13 11:08:13

开源架构中的数据库选择优化版

上一篇文章推荐&#xff1a; 开源架构学习指南&#xff1a;文档与资源的智慧锦囊&#xff08;New&#xff09; 我管理的社区推荐&#xff1a;【青云交社区】和【架构师社区】 推荐技术圈福利社群&#xff1a;点击快速加入 开源架构中的数据库选择优化版 一、引言二、关系型开源…...

编程日记 2025/7/13 23:09:47

Echarts+vue电商平台数据可视化——webSocket改造项目

websocket的基本使用&#xff0c;用于测试前端能否正常获取到后台数据 后台代码编写&#xff1a; const path require("path"); const fileUtils require("../utils/file_utils"); const WebSocket require("ws"); // 创建WebSocket服务端的…...

编程日记 2025/7/15 8:05:00

【网络安全实验室】SQL注入实战详情

如果额头终将刻上皱纹&#xff0c;你只能做到&#xff0c;不让皱纹刻在你的心上 1.最简单的SQL注入 查看源代码&#xff0c;登录名为admin 最简单的SQL注入&#xff0c;登录名写入一个常规的注入语句&#xff1a; 密码随便填&#xff0c;验证码填正确的&#xff0c;点击登录…...

编程日记 2025/7/15 13:43:13

【信息系统项目管理师】第14章：项目沟通管理过程详解

更多内容请见： 备考信息系统项目管理师-专栏介绍和目录 文章目录 一、规划沟通管理1、输入2、工具与技术3、输出二、管理沟通1、输入2、工具与技术3、输出三、监督沟通1、输入2、工具与技术3、输出一、规划沟通管理 定义：规划沟通管理是基于每个干系人或干系人群体的信息需求…...

编程日记 2025/7/11 22:27:46

YOLOv5部署到web端（flask+js简单易懂）

文章目录 前言最终实现效果图后端实现 主界面检测函数检测结果显示 前端实现 主界面(index.html&#xff09;显示图片界面 总结 前言 最近&#xff0c;老板让写一个程序把yolov5检测模型部署到web端&#xff0c;在网页直接进行目标检测。经过1个星期的努力&#xff0c;终于实…...

编程日记 2025/7/13 1:15:36

什么是自治系统和非自治系统

自治系统 自治系统的特征是其状态方程不依赖于时间。举个简单的例子&#xff0c;考虑一阶常微分方程&#xff1a; d x d t − x \frac{dx}{dt} -x dtdx​−x 这是一个经典的指数衰减过程&#xff0c;其中状态 (x) 随时间 (t) 衰减。这个系统是自治的&#xff0c;因为它的演…...

编程日记 2025/7/14 11:50:00

使用 CSS 的 `::selection` 伪元素来改变 HTML 文本选中时的背景颜色

定义 ::selection 伪元素&#xff1a; 在你的 CSS 文件中&#xff0c;添加 ::selection 伪元素&#xff0c;并设置 background-color 属性来改变选中文本的背景颜色。 示例代码&#xff1a; ::selection {background-color: yellow; /* 你可以根据需要更改颜色 */color: black…...

编程日记 2025/7/15 15:38:25

从0入门自主空中机器人-3-【环境与常用软件安装】

关于本课程&#xff1a; 本次课程是一套面向对自主空中机器人感兴趣的学生、爱好者、相关从业人员的免费课程&#xff0c;包含了从硬件组装、机载电脑环境设置、代码部署、实机实验等全套详细流程&#xff0c;带你从0开始&#xff0c;组装属于自己的自主无人机&#xff0c;并让…...

编程日记 2025/7/13 18:39:37

jmeter分布式启动

https://www.cnblogs.com/qtclm/p/11082081.html 1、代理机&#xff1a;输入“ipconfig”&#xff0c;找到IP地址&#xff0c;在Jmeter/bin/jmeter.properties设置remote host 启动jmeter server 1、控制机&#xff1a;输入“ipconfig”&#xff0c;找到IP地址&#xff0c;在J…...

编程日记 2025/7/15 8:20:36

【Linux】HTTP cookie与session

在登录B站时&#xff0c;有登录和未登录两种状态&#xff0c; 问题&#xff1a;B站是如何认识我这个登录用户的&#xff1f;问题&#xff1a;HTTP是无状态、无连接的&#xff0c;怎么能够记住我&#xff1f; HTTP协议是无状态、无连接的。比如客户端&#xff08;浏览器&#…...

编程日记 2025/7/14 22:27:07

20. 【.NET 8 实战--孢子记账--从单体到微服务】--简易权限--补充--自动添加接口地址

在同学学习过程&#xff0c;部分同学向我反馈说每次新增接口都要在接口表里手动添加一条接口很麻烦&#xff0c;因此我把项目代码做了一个改动&#xff0c;使我们不需要手动添加&#xff0c;每次项目运行起来后就会自动把新的接口地址添加进去。 一、实现 首先&#xff0c;我…...

编程日记 2025/7/14 5:27:41

[Linux] 服务器CPU信息

&#xff08;1&#xff09;查看CPU信息&#xff08;型号&#xff09; cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c输出&#xff1a;可以看到有128个虚拟CPU核心&#xff0c;型号是后面一串 128 Intel(R) Xeon(R) Platinum 8336C CPU 2.30GHz&#xff08;2&…...

编程日记 2025/7/11 19:00:05

java_使用阿里云oss服务存储图片

什么情况下可以使用阿里云oss服务存储图片&#xff1f; 对图片的访问速度有高要求时使用&#xff0c;方便用户快速的&#xff08;比如在网页页面中&#xff09;访问到图像 参考&#xff1a;41 尚上优选项目-平台管理端-商品信息管理模块-阿里云OSS介绍_哔哩哔哩_bilibili 1.…...

编程日记 2025/7/13 22:22:12

Dali 1.1.4 | 解锁版AI图像生成器，无限生成

Dali是一款先进的AI图像生成器应用程序&#xff0c;能够根据您的描述生成不同风格的独特图像。它不仅限于生成艺术作品&#xff0c;还可以创建创新的纹身设计、独一无二的标志以及超写实照片。该软件使用尖端技术&#xff0c;将想象力转化为现实&#xff0c;提供迷人的数字艺术…...

编程日记 2025/7/15 16:29:59

快手视频不让下载怎么保存到相册

快手&#xff0c;作为国内领先的短视频平台之一&#xff0c;吸引了无数用户发布创意视频、分享生活点滴。随着短视频版权保护和用户隐私问题的日益严重&#xff0c;越来越多的视频内容在平台内都采取了“不让下载”的限制。面对这一情况&#xff0c;很多用户都希望能够保存自己…...

编程日记 2025/7/14 8:32:28

Linux环境下CUDA与对应版本CuDNN的安装指南

转载&#xff1a;Linux环境下CUDA与对应版本CuDNN的安装指南-百度开发者中心...

编程日记 2025/7/2 14:12:50

mybatisPlus打印sql配置

MyBatis-Plus 提供了方便的配置方式来打印 SQL 查询语句&#xff0c;以便进行调试和性能分析。可以通过配置 log 来输出 SQL 语句以及执行的参数。 方法 1&#xff1a;通过 application.properties 或 application.yml 配置打印 SQL 可以通过配置 application.properties 或 a…...

编程日记 2025/7/16 4:32:21

InstructGPT：基于人类反馈训练语言模型遵从指令的能力

大家读完觉得有意义记得关注和点赞&#xff01;&#xff01;&#xff01; 大模型进化树&#xff0c;可以看到 InstructGPT 所处的年代和位置。来自 大语言模型&#xff08;LLM&#xff09;综述与实用指南&#xff08;Amazon&#xff0c;2023&#xff09; 目录 摘要 1 引言 …...

编程日记 2025/7/15 8:34:36