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

用css实现瀑布流布局

news 2026/4/8 7:19:44

上效果

知识理解

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;由浏览器根据容器的宽度自动调整，尽可能一行多个200px宽度的列数 <!DOCTYPE html> <html lang"en"><head><me…...

编程日记 2024/12/31 13:23:40

FortiAl为擎重塑网络与安全运营未来

在当今数字化浪潮汹涌的时代，网络安全运营的重要性愈发凸显，而人工智能的迅猛发展则如同一股强劲的东风，为这一领域带来了革命性的变革。Fortinet攻防专家邹国雄在《FortiAI：以生成式人工智能（GenAI）简化Fo…...

编程日记 2024/12/31 13:21:38

优化租赁小程序提升服务效率与用户体验的策略与实践

内容概要在这个快速发展的商业环境中，租赁小程序成为了提升服务效率和用户体验的重要工具。通过对用户需求的深入挖掘，我们发现他们对于功能的便捷性、响应速度和界面的友好性有着极高的期待。因此，针对这些需求，完善租赁小程序…...

编程日记 2024/12/31 13:18:35

基于Python的医院预约挂号与诊断系统

作者：计算机学姐开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等，“文末源码”。专栏推荐：前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码精品专栏：…...

编程日记 2024/12/31 13:17:33

Spring Boot教程之四十：使用 Jasypt 加密 Spring Boot 项目中的密码

如何使用 Jasypt 加密 Spring Boot 项目中的密码在本文中，我们将学习如何加密 Spring Boot 应用程序配置文件（如 application.properties 或 application.yml）中的数据。在这些文件中，我们可以加密用户名、密码等。您经常会遇到…...

编程日记 2024/12/31 13:14:30

Design Compiler：两种工作模式（线负载模式和拓扑模式）

相关阅读 Design Compilerhttps://blog.csdn.net/weixin_45791458/category_12738116.html?spm1001.2014.3001.5482 Design Compiler可以以线负载模式或拓扑模式启动，必须选择其中一个模式。在拓扑模式下还可使用多模式和UPF模式：多模式允许在多种工作…...

编程日记 2024/12/31 13:12:28

窦明—环境和教育对人的影响具象化

窦明—“环境和教育有多影响人”的具象化本篇载体：窦明与环境本篇主体：环境和教育对人的影响很多网友调侃说，窦明前后两世性格变了，连面向都看起来变了可不是嘛，命相和品相生面相，性格也影响着神态和…...

编程日记 2024/12/31 13:11:26

41.1 预聚合提速实战项目之需求分析和架构设计

本节重点介绍 : 需求分析架构设计需求分析使用预聚合提速查询并且降低高基数查询对后端的压力用户无需变更grafana上的查询语句，后端自动替换效果图架构设计架构图解决方案说明 heavy_query对用户侧表现为查询速度慢在服务端会导致资源占用过多甚至打挂…...

编程日记 2024/12/31 13:09:24

洛谷P2814 家谱（c嘎嘎）

题目链接：P2814 家谱 - 洛谷 | 计算机科学教育新生态题目难度：普及/提高解题心得：这道题用了并查集（貌似不怎么常用的字符串并查集），用STL中的map将子孙和祖先连接起来，第一次接触这种做法感…...

编程日记 2024/12/31 13:04:18

时空信息平台-API安全措施-下篇：登录鉴权【访问受限】您的请求已被该站点的安全策略拦截。

文章目录引言I 登录鉴权处理逻辑校验顺序用户状态校验密码校验Token鉴权短信验证码/图形验证码登录设备限制II 服务端发生错误的处理业务返回码处理前端处理业务返回码nginx处理http状态码引言时空信息平台-API安全措施：上篇（通讯协议的安全措施） https://blog.csdn.net/z…...

编程日记 2024/12/31 13:03:17

找不到vcruntime140.dll文件，无法继续执行如何修复？共有7种方法

vcruntime140.dll是Microsoft Visual C 2015 Redistributable包的一部分，它是一个动态链接库（DLL），为使用C编写的程序提供必要的运行时支持。当用户尝试运行依赖于这个DLL的程序时，如果系统中缺少vcruntime140.dll文件…...

编程日记 2024/12/31 13:02:16

【PCIe 总线及设备入门学习专栏 4.5 -- PCIe Message and PCIe MSI】

文章目录 PCIe Message 与 MSIPCIe Message 和 MSI 的作用与关系MSI 的配置与寄存器MSI 和 ARM GIC 的关系示例：MSI 在 ARM GIC 的实际应用总结 PCIe Message 与 MSI 本文将介绍 PCIe message 的作用以及message 与 MSI 的关系，再介绍 MSI 如何配置以及…...

编程日记 2024/12/31 13:00:13

Docker搭建MySQL

Docker搭建MySQL 准备工作先准备配置目录和持久化目录，举个栗子：mkdir -p /opt/module/mysql/{conf,data,log}准备配置文件*.cnf,放到/opt/module/mysql/conf目录下。当然不准备也没事，容器中有个默认配置：/etc/mysql/conf.d/m…...

编程日记 2024/12/31 12:49:04

#C01L11P02. C01.L11.while循环.while循环和for循环的区别

唉，你们善良的王又来给你们发文章了！！！ for循环一般应用于循环次数已知的情况； while循环一般应用于循环次数未知的情况； 在一般情况下，这两者是可以相互转化的。举一个简单较适合用for循环…...

编程日记 2024/12/31 12:47:02

利用deepspeed在Trainer下面微调大模型

当模型参数越来越大的情况下，如果我们的GPU内存比较小，那么就没办法直接进行全参数微调，此时我们可以借助deepspeed来进行微调。 1、deepspeed的配置文件：deepspeed.json {"train_batch_size": 4,"train_micro_b…...

编程日记 2024/12/31 12:44:57

【spring】参数校验Validation

前言在实际开发中，我们无法保证客户端传来的请求都是合法的。比如一些要求必传的参数没有传递，传来的参数长度不符合要求等，这种时候如果放任不管，继续执行后续业务逻辑，很有可能就会出现意想不到的bug。有人可能会…...

编程日记 2024/12/31 12:42:55

基于PyQt5的UI界面开发——图像与视频的加载与显示

介绍这里我们的主要目标是实现一个基于PyQt5和OpenCV的图像浏览和视频播放应用。用户可以选择本地的图像或视频文件夹，进行图像自动播放和图像切换以及视频播放和调用摄像头等操作，并且支持图像保存功能。项目的核心设计包括文件路径选择、图像或视频的…...

编程日记 2024/12/31 12:40:53

[python SQLAlchemy数据库操作入门]-16.CTE：简化你的复杂查询

哈喽，大家好，我是木头左！在SQL的世界里，Common Table Expressions（公共表表达式），简称CTE，是一种强大的工具，它允许用户在单个查询中定义临时的结果集。这些结果集可以在整个查询中被多次引用，就像它们是数据库中的物理表一样。CTE不仅提供了一种组织和简化复杂查询…...

编程日记 2024/12/31 12:39:52

多分类的损失函数

在多分类任务中，常用的损失函数能够衡量模型输出的类别分布与目标类别之间的差异，帮助模型学习更准确的分类能力。以下是多分类任务中常用的损失函数： 1. 交叉熵损失（Cross-Entropy Loss）公式: CrossEntropyLoss = − 1 N ∑ i =...

编程日记 2024/12/31 12:38:50

在WSL的系统中配置免密和GitHub传输数据（SSH）

在 WSL（Windows Subsystem for Linux）系统中配置免密与 GitHub 传输数据，主要包括设置 SSH 密钥对、将公钥添加到 GitHub 账户以及确保可以通过 WSL 正常使用这些密钥。以下是详细的步骤： 1. 检查现有 SSH 密钥首先&#xff0c…...

编程日记 2024/12/31 12:33:46

重磅嘉宾|麻省理工学院（MIT）CSAIL 副主任 Daniel Jackson 分享：解码软件工程底层范式

当大模型把代码编写门槛拉到最低，软件工程的核心矛盾已从“写不出代码”转向“控不住设计”。AI能快速产出代码片段，却难以把控系统概念、模块边界与长期可靠性。如何让AI辅助开发既高效又可控？如何构建可解释、可组合、可验证的AI-native软件…...

编程新知 2026/4/8 5:27:26

translategemma-27b-it部署教程：Ollama模型缓存路径迁移与多用户共享配置

translategemma-27b-it部署教程：Ollama模型缓存路径迁移与多用户共享配置 1. 快速了解translategemma-27b-it translategemma-27b-it是一个基于Gemma 3架构的先进翻译模型，专门处理55种语言之间的翻译任务。这个模型不仅能翻译文字，还能看懂…...

编程新知 2026/4/8 5:02:57

嵌入式CLI框架：轻量级树形命令行调试系统

1. 项目概述debug-cli是一个专为嵌入式系统设计的轻量级、模块化、面向对象的调试命令行接口（CLI）框架。它不依赖标准C库的stdio或动态内存分配，完全适配资源受限的MCU环境（如 Cortex-M0/M3/M4、RISC-V 32位内核）&…...

编程新知 2026/4/8 4:22:01

GEO监测是什么？2026年品牌主必须了解的AI可见度追踪工具

一、从一个真实场景说起 2026年，某消费品品牌的市场总监做了一个测试。她打开DeepSeek，输入："XX行业哪些品牌比较值得信赖？" AI给出了五个品牌，她们公司不在其中。她换了一个问法，再问一次…...

编程新知 2026/4/8 3:31:07

网站seo排名工具有哪些

网站SEO排名工具有哪些？详细解析与实用建议在互联网时代，网站的SEO（搜索引擎优化）已经成为提升网站流量和品牌知名度的关键手段。为了帮助网站管理者和数字营销人员更好地进行SEO优化，市面上涌现了各种各样的SEO排名…...

编程新知 2026/4/8 3:05:36

【时域心法】别用“平滑”谋杀你的闭环！撕碎软件滤波的视觉骗局，直视“相位延迟”的物理死刑

摘要：纯软件思维有着一种对“平滑数据”的病态迷恋。当他们看到夹杂着毛刺和电磁噪声的 ADC 信号时，最本能的反应就是砸下极其粗暴的“滑动平均滤波”或“低通滤波”。他们在上位机屏幕上画出了绝美的平滑曲线，却不知道自己已经亲手切断了系统…...

编程新知 2026/4/8 2:50:49

OpenClaw开发提效指南：Qwen3-14b_int4_awq辅助日志分析与命令执行

OpenClaw开发提效指南：Qwen3-14b_int4_awq辅助日志分析与命令执行 1. 为什么开发者需要OpenClaw 作为一名全栈开发者，我每天要处理数十个项目的日志文件、执行测试脚本、生成汇总报告。这些重复性工作不仅枯燥，还容易出错。直到我发现OpenC…...

编程新知 2026/4/8 2:42:24

保姆级教程：在Windows 11上用PyTorch 2.1和CUDA 12.1搞定TFE-GNN加密流量分类模型

在Windows 11上部署TFE-GNN加密流量分类模型的完整指南随着图神经网络（GNN）在网络安全领域的广泛应用，TFE-GNN模型因其在加密流量细粒度分类中的出色表现而备受关注。然而，对于使用最新硬件和软件环境的研究者来说，部…...

编程新知 2026/4/8 2:40:17

OpenClaw官网怎么逛？新手快速找到文档、教程和体验入口的完整指南

OpenClaw官网怎么逛？新手快速找到文档、教程和体验入口的完整指南关键词：OpenClaw、OpenClaw官网、AI智能体、MCP、EasyClaw、AI工具链、新手入门最近越来越多人开始关注 OpenClaw，但很多人真正点进官网之后，第一反应并不是“哇…...

编程新知 2026/4/8 2:19:55

结构调整法降AI怎么做？4步把AI率从80%降到30%以内

结构调整法是把AI生成的“标准段落结构“打散重组，通过改变逻辑顺序来消除AI检测特征。原理上可行，但操作比翻译大法更复杂。我用一篇8000字论文测试了完整流程，结论是：结构调整法效果不如专业工具稳定，但作为人工辅…...

编程新知 2026/4/8 1:39:01

上效果

知识理解

相关文章：