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

用css实现瀑布流布局

news 2026/1/13 23:47:20

上效果

知识理解

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…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

洛谷P2814 家谱（c嘎嘎）

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

编程日记 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包的一部分&#xff0c;它是一个动态链接库&#xff08;DLL&#xff09;&#xff0c;为使用C编写的程序提供必要的运行时支持。当用户尝试运行依赖于这个DLL的程序时&#xff0c;如果系统中缺少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 的关系示例&#xff1a;MSI 在 ARM GIC 的实际应用总结 PCIe Message 与 MSI 本文将介绍 PCIe message 的作用以及message 与 MSI 的关系&#xff0c;再介绍 MSI 如何配置以及…...

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

Docker搭建MySQL

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

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

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

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

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

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

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

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

【spring】参数校验Validation

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

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

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

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

编程日记 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&#xff08;Windows Subsystem for Linux&#xff09;系统中配置免密与 GitHub 传输数据&#xff0c;主要包括设置 SSH 密钥对、将公钥添加到 GitHub 账户以及确保可以通过 WSL 正常使用这些密钥。以下是详细的步骤&#xff1a; 1. 检查现有 SSH 密钥 首先&#xff0c…...

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

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/9 7:20:15

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2026/1/11 1:54:13

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

编程新知 2025/12/31 16:17:54

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

编程新知 2025/11/13 2:37:01

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

编程新知 2026/1/10 5:22:42

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...

编程新知 2026/1/4 4:45:31

针对药品仓库的效期管理问题，如何利用WMS系统“破局”

案例&#xff1a; 某医药分销企业&#xff0c;主要经营各类药品的批发与零售。由于药品的特殊性&#xff0c;效期管理至关重要&#xff0c;但该企业一直面临效期问题的困扰。在未使用WMS系统之前&#xff0c;其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...

编程新知 2026/1/12 12:53:09