用css实现瀑布流布局
上效果
知识理解
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…...
FortiAl为擎重塑网络与安全运营未来
在当今数字化浪潮汹涌的时代，网络安全运营的重要性愈发凸显，而人工智能的迅猛发展则如同一股强劲的东风，为这一领域带来了革命性的变革。Fortinet攻防专家邹国雄在《FortiAI：以生成式人工智能（GenAI）简化Fo…...
优化租赁小程序提升服务效率与用户体验的策略与实践
内容概要 在这个快速发展的商业环境中，租赁小程序成为了提升服务效率和用户体验的重要工具。通过对用户需求的深入挖掘，我们发现他们对于功能的便捷性、响应速度和界面的友好性有着极高的期待。因此，针对这些需求，完善租赁小程序…...
基于Python的医院预约挂号与诊断系统
作者：计算机学姐 开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等，“文末源码”。 专栏推荐：前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏：…...
Spring Boot教程之四十：使用 Jasypt 加密 Spring Boot 项目中的密码
如何使用 Jasypt 加密 Spring Boot 项目中的密码 在本文中，我们将学习如何加密 Spring Boot 应用程序配置文件（如 application.properties 或 application.yml）中的数据。在这些文件中，我们可以加密用户名、密码等。 您经常会遇到…...
Design Compiler：两种工作模式（线负载模式和拓扑模式）
相关阅读 Design Compilerhttps://blog.csdn.net/weixin_45791458/category_12738116.html?spm1001.2014.3001.5482 Design Compiler可以以线负载模式或拓扑模式启动，必须选择其中一个模式。在拓扑模式下还可使用多模式和UPF模式：多模式允许在多种工作…...
窦明—环境和教育对人的影响具象化
窦明—“环境和教育有多影响人”的具象化 本篇载体：窦明与环境 本篇主体：环境和教育对人的影响 很多网友调侃说，窦明前后两世性格变了，连面向都看起来变了 可不是嘛，命相和品相生面相，性格也影响着神态和…...
41.1 预聚合提速实战项目之需求分析和架构设计
本节重点介绍 : 需求分析架构设计 需求分析 使用预聚合提速查询并且降低高基数查询对后端的压力用户无需变更grafana上的查询语句，后端自动替换效果图 架构设计 架构图 解决方案说明 heavy_query对用户侧表现为查询速度慢在服务端会导致资源占用过多甚至打挂…...
洛谷P2814 家谱（c嘎嘎）
题目链接：P2814 家谱 - 洛谷 | 计算机科学教育新生态 题目难度：普及/提高 解题心得：这道题用了并查集（貌似不怎么常用的字符串并查集），用STL中的map将子孙和祖先连接起来，第一次接触这种做法感…...
时空信息平台-API安全措施-下篇：登录鉴权【访问受限】您的请求已被该站点的安全策略拦截。
文章目录 引言I 登录鉴权处理逻辑校验顺序用户状态校验密码校验Token鉴权短信验证码/图形验证码登录设备限制II 服务端发生错误的处理业务返回码处理前端处理业务返回码nginx处理http状态码引言 时空信息平台-API安全措施：上篇（通讯协议的安全措施） https://blog.csdn.net/z…...
找不到vcruntime140.dll文件，无法继续执行如何修复？共有7种方法
vcruntime140.dll是Microsoft Visual C 2015 Redistributable包的一部分，它是一个动态链接库（DLL），为使用C编写的程序提供必要的运行时支持。当用户尝试运行依赖于这个DLL的程序时，如果系统中缺少vcruntime140.dll文件…...
【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 如何配置以及…...
Docker搭建MySQL
Docker搭建MySQL 准备工作 先准备配置目录和持久化目录，举个栗子：mkdir -p /opt/module/mysql/{conf,data,log}准备配置文件*.cnf,放到/opt/module/mysql/conf目录下。当然不准备也没事，容器中有个默认配置：/etc/mysql/conf.d/m…...
#C01L11P02. C01.L11.while循环.while循环和for循环的区别
唉，你们善良的王又来给你们发文章了！！！ for循环一般应用于循环次数已知的情况； while循环一般应用于循环次数未知的情况； 在一般情况下，这两者是可以相互转化的。 举一个简单较适合用for循环…...
利用deepspeed在Trainer下面微调大模型
当模型参数越来越大的情况下，如果我们的GPU内存比较小，那么就没办法直接进行全参数微调，此时我们可以借助deepspeed来进行微调。 1、deepspeed的配置文件：deepspeed.json {"train_batch_size": 4,"train_micro_b…...
【spring】参数校验Validation
前言 在实际开发中，我们无法保证客户端传来的请求都是合法的。比如一些要求必传的参数没有传递，传来的参数长度不符合要求等，这种时候如果放任不管，继续执行后续业务逻辑，很有可能就会出现意想不到的bug。 有人可能会…...
基于PyQt5的UI界面开发——图像与视频的加载与显示
介绍 这里我们的主要目标是实现一个基于PyQt5和OpenCV的图像浏览和视频播放应用。用户可以选择本地的图像或视频文件夹，进行图像自动播放和图像切换以及视频播放和调用摄像头等操作，并且支持图像保存功能。项目的核心设计包括文件路径选择、图像或视频的…...
[python SQLAlchemy数据库操作入门]-16.CTE：简化你的复杂查询
哈喽，大家好，我是木头左！ 在SQL的世界里，Common Table Expressions（公共表表达式），简称CTE，是一种强大的工具，它允许用户在单个查询中定义临时的结果集。这些结果集可以在整个查询中被多次引用，就像它们是数据库中的物理表一样。CTE不仅提供了一种组织和简化复杂查询…...
多分类的损失函数
在多分类任务中，常用的损失函数能够衡量模型输出的类别分布与目标类别之间的差异，帮助模型学习更准确的分类能力。以下是多分类任务中常用的损失函数： 1. 交叉熵损失（Cross-Entropy Loss） 公式: CrossEntropyLoss = − 1 N ∑ i =...
在WSL的系统中配置免密和GitHub传输数据（SSH）
在 WSL（Windows Subsystem for Linux）系统中配置免密与 GitHub 传输数据，主要包括设置 SSH 密钥对、将公钥添加到 GitHub 账户以及确保可以通过 WSL 正常使用这些密钥。以下是详细的步骤： 1. 检查现有 SSH 密钥 首先，…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引，可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度（创建索引的主要原因）。3. 可以加速表和表之间的连接，实现数据的参考完整性。4. 可以在查询过程中，…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
laravel8+vue3.0+element-plus搭建方法
创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...
2025季度云服务器排行榜
在全球云服务器市场，各厂商的排名和地位并非一成不变，而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势，对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析： 一、全球“三巨头”…...
boost::filesystem::path文件路径使用详解和示例
boost::filesystem::path 是 Boost 库中用于跨平台操作文件路径的类，封装了路径的拼接、分割、提取、判断等常用功能。下面是对它的使用详解，包括常用接口与完整示例。 1. 引入头文件与命名空间 #include <boost/filesystem.hpp> namespace fs b…...
如何通过git命令查看项目连接的仓库地址？
要通过 Git 命令查看项目连接的仓库地址，您可以使用以下几种方法： 1. 查看所有远程仓库地址 使用 git remote -v 命令，它会显示项目中配置的所有远程仓库及其对应的 URL： git remote -v输出示例： origin https://…...
Redis上篇--知识点总结
Redis上篇–解析 本文大部分知识整理自网上，在正文结束后都会附上参考地址。如果想要深入或者详细学习可以通过文末链接跳转学习。 1. 基本介绍 Redis 是一个开源的、高性能的 内存键值数据库，Redis 的键值对中的 key 就是字符串对象，而 val…...
智能体革命：企业如何构建自主决策的AI代理？
OpenAI智能代理构建实用指南详解 随着大型语言模型（LLM）在推理、多模态理解和工具调用能力上的进步，智能代理（Agents）成为自动化领域的新突破。与传统软件仅帮助用户自动化流程不同，智能代理能够自主执行工…...
虚拟机网络不通的问题（这里以win10的问题为主，模式NAT）
当我们网关配置好了，DNS也配置好了，最后在虚拟机里还是无法访问百度的网址。 第一种情况： 我们先考虑一下，网关的IP是否和虚拟机编辑器里的IP一样不，如果不一样需要更改一下，因为我们访问百度需要从物理机…...