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

vue2实现【瀑布流布局】

news 来源：原创 2025/7/7 4:13:52

瀑布流

- 1. 解释
- 2. 形成结构和样式
- 3. 自定义指令

1. 解释

在这里插入图片描述

瀑布流特征：

等宽不等高：元素宽度固定，高度根据内容自适应。
错落排列：元素像瀑布一样从上到下依次填充，自动寻找最短列插入

体现：图中第一排1，2，3元素中，3是最短高度，就是该行最短列。

2. 形成结构和样式

<template><div class="page-main"><div class="card"><!-- v-waterfall是自定义指令 属性值是个回调函数--><div v-waterfall="el => updateLayout(el)" class="card-item" v-for="item in cardDate" :key="item.id":style="{ background: item.color, height: item.height }"><p class="text">{{ item.id }}</p></div></div></div>
</template>

//这是<script>data中的数据，结构是通过v-for遍历的cardDate: [{ id: 1, color: '#76da6e', height: '100px' },{ id: 2, color: '#57c797', height: '80px' },{ id: 3, color: '#54cac7', height: '70px' },{ id: 4, color: '#b16dc7', height: '120px' },{ id: 5, color: '#dc933d', height: '130px' },{ id: 6, color: '#b74acf', height: '90px' },{ id: 7, color: '#d93e5a', height: '80px' },{ id: 8, color: '#5474dd', height: '100px' },{ id: 9, color: '#e42526', height: '120px' },{ id: 10, color: '#e86c92', height: '90px' }],

<style scoped>
/* .page-main {position: relative;
} */.card {position: relative;margin: 0 auto;width: calc(3 * 200px);/* 3列，每列200px宽度*/
}.card-item {/* 相对于最近的非static定位的祖先元素（.card）定位(0,0) */position: absolute;width: 200px;/* 使得内容居中（可省略） */display: flex;align-items: center;justify-content: center;color: black;font-size: 24px;/* 监听到css样式变化，过渡0.3s效果 */transition: all 0.3s;
}
</style>

未加上js动态计算每个元素的位置—初始样子是将所有元素重叠在一起(如图)
在这里插入图片描述
然后就要计算出每块元素应该存在的位置（top和left）【css中每块元素position都是absolute，而且没有设置边偏移，默认都是0】

DOM元素尺寸属性不了解可以看这里有图文说明

<script>
export default {name: 'App',data() {return {cardDate: [{ id: 1, color: '#76da6e', height: '100px' },{ id: 2, color: '#57c797', height: '80px' },{ id: 3, color: '#54cac7', height: '70px' },{ id: 4, color: '#b16dc7', height: '120px' },{ id: 5, color: '#dc933d', height: '130px' },{ id: 6, color: '#b74acf', height: '90px' },{ id: 7, color: '#d93e5a', height: '80px' },{ id: 8, color: '#5474dd', height: '100px' },{ id: 9, color: '#e42526', height: '120px' },{ id: 10, color: '#e86c92', height: '90px' }],columnHeights: [0, 0, 0] //每列元素的高度}},directives: {waterfall: {inserted(el, binding) {const callback = binding.value || {};callback(el);}}},methods: {updateLayout(item) {const column = this.getMinColumnHeight(this.columnHeights);//计算每个元素位移x轴和y轴距离const itemTop = this.columnHeights[column];const itemLeft = column * item.clientWidth;item.style.transform = `translate(${itemLeft}px,${itemTop}px)`;//此时该元素item已经定位完成//则重新跟新原本最短列为this.columnHeights[column] + item.offsetHeight； this.columnHeights[column] += item.offsetHeight;},getMinColumnHeight(arr) {let min = Math.min(...arr);return arr.indexOf(min) != -1 ? arr.indexOf(min) : 0;}},
}
</script>

3. 自定义指令

directives: {waterfall: {inserted(el, binding) {console.log(binding);const callback = binding.value || {};callback(el);}}},

在这里插入图片描述
el则是每个cart-item元素

(注:本文例子参考这个b站视频，我进行了补充)

vue2实现【瀑布流布局】

瀑布流 1. 解释2. 形成结构和样式3. 自定义指令 1. 解释瀑布流特征： 等宽不等高：元素宽度固定，高度根据内容自适应。错落排列：元素像瀑布一样从上到下依次填充，自动寻找最短列插入体现：图中第一排1&…...

编程日记 2025/7/7 4:13:52

系统架构设计（十六）：敏感点、权衡点、风险点和非风险点

术语定义概念定义说明敏感点（Sensitivity Point）架构设计中对某个质量属性有显著影响的点，一旦改变该点，会显著影响系统的某个质量属性。风险点（Risk Point）由于架构决策带来的潜在失败风险，可…...

编程日记 2025/7/7 3:42:46

优化dp贪心数论

这次三个题目都来自牛客周赛93，个人觉得出的很好，收获颇多。 1.简单贪心题目意思： 任意选定两个数字，相加之和替代两个数字中的一个，另一个抹除。求操作之后最大字典序之和思路： 最大字典序之和&…...

编程日记 2025/6/27 23:19:37

详解MySQL 的 binlog，redo log，undo log

MySQL 的 binlog、redo log 和 undo log 是数据库事务处理与数据一致性的核心组件，各自承担不同的职责。 1. binlog（二进制日志） 定位：MySQL Server 层实现的逻辑日志，与存储引擎无关。作用： 主从复制&…...

编程日记 2025/6/27 23:34:52

SymPy|主元、重新表示、分数、约分表达式、极限、级数、ode、获取值、输出形式

SymPy 是一个 Python 的符号计算库，广泛应用于数学计算、物理建模、工程分析等领域。本文将详细介绍 SymPy 在处理主元操作、重新表示、分数、约分表达式、极限、级数、常微分方程（ODE）以及获取值和输出形式等方面的应用，通过完整…...

编程日记 2025/6/27 23:33:02

Java 05正则表达式

正则表达式 1.简介一个字符串，指定一些规则，来校验其他的字符串 String s"";规则需要进行匹配的字符串.matches(s);来判断2.字符类**（单个） [abc] String s"[ABC]"; "A".matches(s);返回true…...

编程日记 2025/6/27 22:58:43

IEEE 802.1Q协议下封装的VLAN数据帧格式

1.概要 802.1d定义了生成树 802.1w定义了快速生成树 802.1s定义了多生成树 802.1q定义了VLAN 2.说明 IEEE802.1q协议的作用是（生成VLAN标记）VLAN编号取值范围：0-4095，其中0和4095是保留编号，所最大值是&#xff…...

编程日记 2025/6/27 23:16:05

VMware三种网络配置对比

桥接模式（Bridged Mode） 核心特点： 虚拟机被视为局域网中的独立设备，直接使用物理网络适配器，需配置与宿主机同一网段的IP地址。典型场景： 虚拟机需对外提供服务（如Web…...

编程日记 2025/6/27 23:30:43

再来1章linux系列-19 防火墙 iptables 双网卡主机的内核 firewall-cmd firewalld的高级规则

学习目标： 实验实验需求实验配置内容和分析 （每一个设备的每一步操作）实验结果验证其他学习内容： 实验实验需求实验配置内容和分析 （每一个设备的每一步操作）实验结果验证其他 1.实验 2.实验需求图…...

编程日记 2025/6/27 23:12:02

Word 转 HTML API 接口

Word 转 HTML API 接口图像/转换 Word 文档转换为 HTML 文件转换 / 超高精度与还原度文件转换 / Word。 1. 产品功能超高精度与还原度的 HTML 文件转换；支持将 Word 文档转换为 HTML 格式；支持 .doc 和 .docx 格式；保持原始 Word 文档的…...

编程日记 2025/6/27 23:35:11

深入解析MATLAB codegen生成MEX文件的原理与优势

一、MATLAB codegen底层工作机制 1.1 MATLAB执行引擎的局限性 MATLAB作为解释型语言，其执行过程包含多个关键步骤： 语法解析：将.m文件代码转换为抽象语法树(AST) 类型推断：运行时动态确定变量类型内存管理：自动处…...

编程日记 2025/6/27 23:27:20

PEFT简介及微调大模型DeepSeek-R1-Distill-Qwen-1.5B

🤗 PEFT（参数高效微调）是由Huggingface团队开发的开源框架，专为大型预训练模型（如GPT、LLaMA、T5等）设计，用于高效地将大型预训练模型适配到各种下游应用，而无需对模型的所有参数进行…...

编程日记 2025/6/27 23:26:06

Python训练营打卡 Day31

文件的规范拆分和写法今日的示例代码包含2个部分 notebook文件夹内的ipynb文件，介绍下今天的思路项目文件夹中其他部分：拆分后的信贷项目，学习下如何拆分的，未来你看到的很多大项目都是类似的拆分方法知识点回顾：文件…...

编程日记 2025/6/27 23:30:18

Google精准狙击OpenAI Codex，发布AI编程助手Jules！

自从OpenAI推出 Codex之后，Google就憋不住了，悄悄得瞄准了OpenAI的最新成果。原计划是是打算在明天举行的Google I/O年度开发者大会上发布相关产品，但Google似乎已经一刻也等不了了。就在昨天，谷歌正式推出了其AI编程——Ju…...

编程日记 2025/6/27 23:36:03

【办公类-18-04】（Python）“验血单信息”批量生成打印（学校、班级、姓名、性别）

背景说明督导结束了，准备春游（夏游），搭档在给孩子写打卡单、心愿单，感慨“好多字都不会写了！” 此时，保健老师来发体检材料，叮嘱红色验血单的填写方法。我觉得我的字也是一塌糊涂。我想用以前做“毕业证书”的方式，将班级幼儿信息打印在体检单上。【办公类-18-03…...

编程日记 2025/6/27 23:24:49

如何使用通义灵码提高前端开发效率

工欲善其事，必先利其器。对于前端开发而言，使用VSCode已经能够极大地提高前端的开发效率了。但有了AI加持后，前端开发的效率又更上一层楼了！ 本文采用的AI是通义灵码插件提供的通义千问大模型，是目前AI性能榜第一梯队…...

编程日记 2025/6/27 23:19:08

苍穹外卖04 新增菜品菜品分页查询删除菜品修改菜品

2-6 新增菜品 02 05-新增菜品_需求分析和设计 03 06-新增菜品_代码开发_1 文件上传接口开发： 在这一部分我们主要在于对阿里云oss的代码开发和实现 1.配置阿里云oss： alioss:endpoint: oss-cn-beijing-internal.aliyuncs.comaccess-key-id: access-ke…...

编程日记 2025/6/27 23:13:52

C++ 读取英伟达显卡名称、架构及算力

C++ 读取英伟达显卡名称、架构及算力通过CUDA Runtime API获取计算能力（推荐）CUDA计算能力（Compute Capability）的版本号直接对应显卡架构（如8.6=Ampere，9.0=Hopper）。实现步骤： 1.安装依赖：安装 NVIDIA CUDA Toolkit。确保显卡驱动支持CUDA。2. C…...

编程日记 2025/6/27 22:58:42

VitePress 中以中文字符结尾的字体加粗 Markdown 格式无法解析

背景在编写vitepress项目过程中，发现了一个markdown格式解析的问题。 md文件中，以中文句号结尾的字体加粗，无法正确解析： 不只是中文句号，只要是加粗语句中以中文字符结尾，都无法被正确解析需要将中文…...

编程日记 2025/6/27 22:58:47

2.前端汇总

框架 html5 html语法 css css3 css语法框架 tailwind css 官网 JavaScript JavaScript语法 typescript 语法 nodejs 语法 vue3 官网组件 vite 打包 vue router -路由 pinia - 状态管理 ui element plus axios - ajax 后台管理系统前端快速开发框架 …...

编程日记 2025/6/27 23:11:40

外部因素导致的 ADC误差来源分析

前面分享了ADC自身因素带来的误差，现在再分享一波由于外部因素导致的ADC采样误差。一、模拟信号源输入减少带来的误差看一个STM32的ADC转换器的示意图： 从图中可以看到，输入源与采样引脚之间存在阻抗RAIN，流入引脚的电压可能因…...

编程日记 2025/7/4 13:06:44

集成运算放大器知识汇总

一、集成运放的组成集成运算放大器，就是通过内部元器件的电参量关系将电参量进行运算，达到放大的目的。我们拆解来看： 集成：将电路封装，留出接口，使其模块化，便于移植。运算：这里…...

编程日记 2025/7/4 19:21:54

HBCPC2025 补题补题连接:Codeforces I 感染做法1：std做法：树上dp统计贡献找最大 #include <bits/stdc.h> using namespace std; typedef long long ll; #define endl \n #define int long long #define pb push_back #define pii pair<int,…...

编程日记 2025/6/27 23:17:13

针对 CSDN高质量博文发布的详细指南

结合技术写作规范与平台特性，分为内容规划、写作技巧、排版优化、发布策略四部分，确保专业性与传播效果： 一、内容规划：精准定位与深度挖掘选题策略热点结合：追踪技术趋势（如2025年AIGC、量子计算&am…...

编程日记 2025/7/4 0:17:02

python读写bin文件

import numpy as np# 创建二进制数据 data np.array([0x33, 0x34, 0x35, 0x36], dtypenp.uint8)# 写入bin文件 with open(example.bin, wb) as f:data.tofile(f)print("bin文件生成成功")data np.fromfile(example.bin, dtypenp.uint8) print("numpy读取结果:…...

编程日记 2025/6/27 23:05:39

矩阵的秩（Rank）

矩阵的秩（Rank）是线性代数中的核心概念，表示矩阵中线性无关的行（或列）的最大数量，反映了矩阵所包含的“独立信息”的多少。以下是其核心要点： 1. 秩的定义行秩：矩阵中线性无关的行…...

编程日记 2025/6/27 23:29:55

Vue响应式系统演进与实现解析

一、Vue 2 响应式实现详解 1. 核心代码实现 // 依赖收集器（观察者模式） class Dep {constructor() {this.subscribers new Set();}depend() {if (activeEffect) {this.subscribers.add(activeEffect);}}notify() {this.subscribers.forEach(effect &g…...

编程日记 2025/6/29 8:37:35

【SPIN】高级时序规范（SPIN学习系列--6）

时序操作符[]（总是）和 <>（最终）可应用于任何LTL公式，因此 []<><>A 和 <>[]<>(A ∧ []B) 在语法上是正确的。本书不涉及LTL的演绎理论（如公理、推理规则及公式的结合律、交换…...

编程日记 2025/6/27 23:38:23

C语言学习之内存函数

今天我们来学习一下C语言中内存函数以下内存函数的使用均需要包含头文件<string.h> 目录 memcpy函数的使用及其模拟实现 memcpy函数的模拟实现 memmove函数的使用和模拟实现 memmove函数的模拟实现 memset函数的使用 memcmp函数的使用 memcpy函数的使用及其模拟实现…...

编程日记 2025/6/27 23:11:36

Python 数据库编程

一、数据库连接基础 1. 标准流程 import database_module # 如mysql.connector, sqlite3等 # 1. 建立连接 connection database_module.connect( host"localhost", user"username", password"password", database"dbnam…...

编程日记 2025/6/27 23:29:29

软考软件评测师——软件工程之开发模型与方法

目录一、核心概念二、主流模型详解 （一）经典瀑布模型 （二）螺旋演进模型 （三）增量交付模型 （四）原型验证模型 （五）敏捷开发实践三、模型选择指南四…...

编程日记 2025/6/27 22:58:55

机器学习入门

机器学习入门 1 . 机器学习是什么？ 机器学习（Machine Learning, ML）是一种用数据经验替代显式规则编程来完成任务的方法──模型从样本 (X, y) 中学习映射函数 f: X → Y，并在新样本上做出预测。和传统“if … else”程序相比&…...

编程日记 2025/6/27 23:24:34

git学习与使用（远程仓库、分支、工作流）

文章目录前言简介git的工作流程git的安装配置git环境：git config --globalgit的基本使用新建目录初始化仓库（repository）添加到暂存区新增/修改/删除文件状态会改变提交到仓库查看提交（commit）的历史记录git其他命令…...

编程日记 2025/6/27 23:25:03

制造业或跨境电商相关行业三种模式：OEM、ODM、OBM

一、基础概念对比模式定义核心能力利润来源控制权OEM代工生产（贴牌生产）纯生产制造能力加工费（薄利）品牌方掌控一切ODM设计生产（自主设计代工）设计研发能力设计溢价生产利润制造商掌握设计OBM自主品牌&am…...

编程日记 2025/6/27 22:58:56

APPtrace 智能参数系统：重构 App 用户增长与运营逻辑

一、免填时代：APPtrace 颠覆传统参数传递模式传统 App 依赖「邀请码 / 手动绑定」实现用户关联，流程繁琐导致 20%-30% 的用户流失。APPtrace 通过 **「链接参数自动传递安装后智能识别」** 技术，让用户在无感知状态下完成关系绑定、场景还…...

编程日记 2025/6/27 23:37:02

在 Excel 中使用 C# .NET 用户定义函数操作步骤

点开选项点击加载项点击跳转点击浏览选择仙盟excel...

编程日记 2025/6/27 23:29:36

PyTest

一、基本用法: 1.测试框架做了什么: (1).测试发现 a.创建test_开头的文件 b.创建Test开头的类 c.创建test_开头的函数或方法 pytest中以每一个函数或方法作为一个用例 pytest主要以名字区分普通函数(方法)、用例 pytest的启动方式:在给定的项目中执行pytest命令即可 p…...

编程日记 2025/6/27 23:28:32

Python Day27 学习

今天学习讲义Day17的内容：无监督算法中的聚类浙大疏锦行 Q1. 什么是聚类？ 本质上就是一种分组分类关于聚类的准备工作： 代码实现 # 先运行之前预处理好的代码 import pandas as pd import pandas as pd #用于数据处理和分析&#xff…...

编程日记 2025/6/27 23:22:39

在 Win 10 上，Tcl/Tk 脚本2个示例

set PATH 新增 D:\Git\mingw64\bin where tclsh D:\Git\mingw64\bin\tclsh.exe where wish D:\Git\mingw64\bin\wish.exe 编写 test_tk.tcl 如下 #!/usr/bin/tclsh # test 文件对话框 package require Tk# 弹出文件选择对话框，限制选择.txt文件 set filePath […...

编程日记 2025/6/27 22:59:17

渐开线少齿差传动学习笔记

之前看到了一个渐开线一齿差的视频，觉得比较有意思，想自己动手做一个看看，下面是最开始尝试的一个失败的结果，不知道小伙伴们发现问题了没？ 本来就是想凑一凑看看，但是发现不是凑起来不是件容易的事。那么…...

编程日记 2025/6/27 23:05:02

基于CATIA参数化圆锥建模的自动化插件开发实践——NX建模之圆锥体命令的参考与移植（二）

引言在CATIA二次开发领域，参数化建模技术可提升复杂几何体的创建效率达60%。本文基于PySide6 GUI框架与pycatia接口库，深度解析锥体自动化建模工具的开发实践。该工具创新性地融合了NX的交互逻辑与CATIA的混合建模技术，实现双模式输入（高度/锥角）的智能参数转换，较传统…...

编程日记 2025/6/27 23:01:19

Java集合框架详解：单列集合与双列集合

目录 1. 引言：为什么需要集合框架 2. 基础概念：集合框架概述 2.1 集合框架的结构编辑编辑 2.2 集合与数组的比较 3. 前置知识：理解集合框架背后的基础数据结构 3.1 数组 3.2 链表 3.3 哈希表 3.4 二叉树与二叉查找树 3.5 红…...

编程日记 2025/7/6 9:30:57

leetcode 33. Search in Rotated Sorted Array

题目描述可以发现的是，将数组从中间分开成左右两部分的时候，一定至少有一部分的数组是有序的。左部分[left,mid-1]，右部分[mid1,right]。第一种情况：左右两部分都是有序的，说明nums[mid]就是整个数组的最大值。此时…...

编程日记 2025/6/27 23:11:10

OpenCV 图像色彩空间转换

一、知识点: 1、色彩空间转换函数 (1)、void cvtColor( InputArray src, OutputArray dst, int code, int dstCn 0, AlgorithmHint hint cv::ALGO_HINT_DEFAULT ); (2)、将图像从一种颜色空间转换为另一种。 (3)、参数说明: src: 输入图像，即要进行颜…...

编程日记 2025/6/27 23:22:12

python-leetcode 69.最小栈

题目： 设计一个支持push,pop,top,操作，并能在常数时间内检索到最小元素的栈。辅助栈法： 1：使用两个栈，一个主栈用于存储所有元素，另一个辅助栈用于存储当前元素的最小值 2: 每次push时，将元…...

编程日记 2025/7/6 11:16:26

C#基础：yield return关键字的特点

一、特点 1.最终返回的结果是IEnumerable<T> 2.使用yield return时，返回的是单个元素（即T） 3.好处：延迟加载，需要时才计算二、验证通过打断点可知，只有当listB遍历的时候，才会进入Get…...

编程日记 2025/6/27 23:09:00

机器学习集成学习方法之随机森林

集成学习方法之随机森林 1 集成学习2 随机森林的算法原理2.1 Sklearn API2.2 示例 1 集成学习机器学习中有一种大类叫集成学习（Ensemble Learning），集成学习的基本思想就是将多个分类器组合，从而实现一个预测效果更好的集成分类…...

编程日记 2025/6/27 23:31:27

【Vue篇】组件的武林绝学：状态风暴下的乾坤挪移术

引言 🔍 Vue组件迷雾重重？ ✧ Scoped如何实现样式隔离？ ✧ Data为何必须是函数？ ✧ 父子组件如何跨域通信？ ✧ Props单向数据流如何破局？ 🚀 本文直击组件化七大核心： ▸ 样式隔离原…...

编程日记 2025/6/27 23:10:54

使用亮数据代理IP+Python爬虫批量爬取招聘信息训练面试类AI智能体（手把手教学版）

文章目录一、为什么要用代理IP？(重要！！！)二、环境准备（三件套走起）2.1 安装必备库（pip大法好）2.2 获取亮数据代理（官网注册送试用） 三、编写爬虫代码&#x…...

编程日记 2025/6/27 23:05:53

【MySQL】第七弹——复习总结视图

文章目录 🌏客户端和数据库操作🌏表操作🌏CRUD 增删改查总结🌏数据库约束🌏表的设计🌏分组查询🌏聚合函数🌏联合查询🌏SQL语句中各部分的执行顺序🪐视图 &…...

编程日记 2025/6/27 23:32:49

瀑布流

1. 解释

2. 形成结构和样式

3. 自定义指令

相关文章：