vue3 实现简单瀑布流

一、整理思路

  • 实际场景中,瀑布流一般由 父组件 提供 数据列表,子组件渲染
  • 每个图片都是根据容器进行 绝对定位 ,从而定好自己的位置
  • 取出 屏幕的宽度,设定 图片的宽度 固定 为一个值,计算可以铺 多少列
  • 按列数 先铺上第一行lefttop 值)
  • 第一行铺满以后,后面的每一张都要 铺在高度最低的列,这是瀑布流的核心!所以要维护一个 长度为 列数 的 列高度数组 用于比较
  • 总结:每次放置一张图,都要计算它的 lefttop 值丢进瀑布流数组中,并且更新 列高度数据 便于下次对比

二、代码

父组件

<WaterFall :list="list" />
// 模拟列表数据
const list = [{height: 300,background: "red",},{height: 400,background: "pink",},{height: 500,background: "blue",},{height: 200,background: "green",},{height: 300,background: "gray",},{height: 400,background: "#CC00FF",},{height: 200,background: "gray",},{height: 100,background: "#996666",},{height: 500,background: "skyblue",},{height: 300,background: "#993366",},{height: 100,background: "#33FF33",},{height: 400,background: "skyblue",},{height: 200,background: "#6633CC",},{height: 300,background: "#666699",},{height: 300,background: "#66CCFF",},{height: 300,background: "skyblue",},{height: 200,background: "#CC3366",},{height: 200,background: "#CC9966",},{height: 200,background: "#FF00FF",},{height: 500,background: "#990000",},{height: 400,background: "red",},{height: 100,background: "#999966",},{height: 200,background: "#CCCC66",},{height: 300,background: "#FF33FF",},{height: 400,background: "#FFFF66",},{height: 200,background: "red",},{height: 100,background: "skyblue",},{height: 200,background: "#33CC00",},{height: 300,background: "#330033",},{height: 100,background: "#0066CC",},{height: 200,background: "skyblue",},{height: 100,background: "#006666",},{height: 200,background: "yellow",},{height: 300,background: "skyblue",},{height: 120,background: "#33CCFF",},{height: 400,background: "#999966",},{height: 630,background: "#CC9966",},{height: 250,background: "#33FF00",},{height: 300,background: "yellow",},{height: 500,background: "green",},
];

子组件

<template><div class="list"><divclass="item"v-for="(item, index) in waterList":style="{width: width + 'px',height: item.height + 'px',left: item.left + 'px',top: item.top + 'px',background: item.background,}">{{ index }}</div></div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";const props = defineProps<{list: any[];
}>();// 图片宽度
const width = 120;
// 图片上下间距
const gap = 20;
// 瀑布流数组
const waterList = ref<any[]>([]);
// 列高度数组
const heightList = reactive<number[]>([]);// 屏幕宽度需要在 mounted 之后拿到
onMounted(() => {// 计算列数const column = Math.floor(document.body.clientWidth / width);// 核心内容就是维护每个图片的 left、topfor (let i = 0; i < props.list.length; i++) {// 先铺上第一行(i < column 则表示是第一行)if (i < column) {props.list[i].top = 0;props.list[i].left = width * i;// 塞进瀑布流waterList.value?.push(props.list[i]);// 高度数据更新heightList[i] = props.list[i].height;}// 后面的就要一张张塞进去,每次找出最低的列往里塞else {// 最低的高度,先默认为第一列高度let current = heightList[0];// 最低的列,先默认为第一个let col = 0;// 循环每一列进行比较heightList.forEach((h, i) => {if (h < current) {current = h;col = i;}});console.log("最低的列", col, "高度为", current);// 由此计算出该图片的 left、topprops.list[i].left = col * width;props.list[i].top = current + gap;// 塞进瀑布流waterList.value.push(props.list[i]);// 更新列高度数组heightList[col] = current + gap + props.list[i].height;}}console.log("waterList", waterList.value);console.log("heightList", heightList);
});
</script>
<style lang="scss" scoped>
.list {position: relative;height: 100%;overflow: auto;.item {position: absolute;font-size: 30px;}
}
</style>

效果如图

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/42662.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Julia进行核递归最小二乘算法(KRLS)的解析与实现

F 标题&#xff1a; 使用Julia进行核递归最小二乘算法&#xff08;KRLS&#xff09;的深度解析与实现 第一部分&#xff1a; 核递归最小二乘算法 (KRLS) 是一个在线核回归算法&#xff0c;这种算法的主要特点是能够一次处理一个样本&#xff0c;并构建一个训练点字典&#xf…

5G科技防汛,助力守护一方平安

“立秋虽已至&#xff0c;炎夏尚还在”&#xff0c;受台风席卷以及季节性影响全国多地正面临强降水的严峻挑战。“落雨又顺秋&#xff0c;绵绵雨不休”&#xff0c;正值“七下八上” 防汛关键时期&#xff0c;贵州省水文水资源局已全面进入备战状态。 为确保及时响应做好防汛抢…

Vue3 setup新特性简单应用

去官网学习→组合式 API&#xff1a;setup() | Vue.js 运行示例&#xff1a; 代码&#xff1a;App.vue <template><div class"home"><img alt"Vue logo" src"../assets/logo.png"><!-- msg 组件传递数据 --><Hell…

VBA_MF系列技术资料1-157

MF系列VBA技术资料 为了让广大学员在VBA编程中有切实可行的思路及有效的提高自己的编程技巧&#xff0c;我参考大量的资料&#xff0c;并结合自己的经验总结了这份MF系列VBA技术综合资料&#xff0c;而且开放源码&#xff08;MF04除外&#xff09;&#xff0c;其中MF01-04属于定…

MySQL 面试题

一、数据库基础 1、MySQL 有哪些数据库类型? (1) 整数类型&#xff1a; TINYINT 1 字节 SMALLINT 2 字节 MEDIUMINT 3 字节 INT 4 字节 BIGINT 8 字节 ① 任何整数类型都可以加上 UNSIGNED …

【学会动态规划】最长湍流子数组(23)

目录 动态规划怎么学&#xff1f; 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后&#xff1a; 动态规划怎么学&#xff1f; 学习一个算法没有捷径&#xff0c;更何况是学习动态规划&#xff0c; 跟我…

vue+elementui 实现文本超出长度显示省略号,鼠标移上悬浮展示全部内容

一、场景 表单内的输入框一般为固定宽度&#xff0c;当输入框内容长度超出输入框宽度时&#xff0c;需要显示省略号&#xff0c;并设置鼠标移到输入框上时悬浮展示全部内容。 <el-tooltipplacement"top-start"effect"light":content"basicData[Or…

在 IDEA 中使用 Git开发 图文教程

在 IDEA 中使用 Git开发 图文教程 一、连接远程仓库二、IDEA利用Git进行开发操作三、分支操作3.1 新建分支3.2 切换分支3.3 删除分支3.4 比较分支3.5 合并分支 四、常用快捷键 一、连接远程仓库 一、打开IDEA&#xff0c;进入目录&#xff1a;File ->New ->Project from…

Skywalking全链路追踪【学习笔记】

Skywalking全链路追踪的服务搭建&#xff0c;使用docker进行安装。 搭建服务 搭建【ES】 # 拉取 docker pull docker.elastic.co/elasticsearch/elasticsearch:7.17.10 # 启动 docker run -p 127.0.0.1:9200:9200 -p 127.0.0.1:9300:9300 -e "discovery.typesingle-nod…

什么是 SPI,和API有什么区别?

面试回答 Java 中区分 API 和 SPI&#xff0c;通俗的讲&#xff1a;API 和 SPI 都是相对的概念&#xff0c;他们的差别只在语义上&#xff0c;API 直接被应用开发人员使用&#xff0c;SPI 被框架扩展人员使用。 API Application Programming Interface 大多数情况下&#xff…

opencv 矩阵运算

1.矩阵乘&#xff08;*&#xff09; Mat mat1 Mat::ones(2,3,CV_32FC1);Mat mat2 Mat::ones(3,2,CV_32FC1);Mat mat3 mat1 * mat2; //矩阵乘 结果 2.元素乘法或者除法&#xff08;mul&#xff09; Mat m Mat::ones(2, 3, CV_32FC1);m.at<float>(0, 1) 3;m.at…

浏览器控制台调试实用方法

许多程序员仅知道控制台的console.log&#xff0c;其实控制台API还包含一些其他实用方法&#xff0c; 这些方法在前端调试时会很有帮助。 目录 console.dir 查看对象属性和方法 输出DOM元素 console.error console.time和console.timeEnd console.log console.clear 总结…

set NOCOUNT on

SET NOCOUNT ON 是一条 SQL 语句&#xff0c;用于禁止在执行查询时返回受影响的行数消息。通常&#xff0c;当执行 INSERT、UPDATE、DELETE 等操作时&#xff0c;数据库会返回一个消息&#xff0c;表示受影响的行数。但在某些情况下&#xff0c;你可能希望禁用这些消息&#xf…

(五)、深度学习框架源码编译

1、源码构建与预构建&#xff1a; 源码构建&#xff1a; 源码构建是通过获取软件的源代码&#xff0c;然后在本地编译生成可执行程序或库文件的过程。这种方法允许根据特定需求进行配置和优化&#xff0c;但可能需要较长的时间和较大的资源来编译源代码。 预构建&#xff1a; 预…

dubbo与zookeeper

ZooKeeper 在 Dubbo 应用中的作用 ZooKeeper 是一个开源的分布式协调服务&#xff0c;它在 Dubbo 中被广泛使用来实现服务注册、发现和配置管理等功能。在 Dubbo 架构中&#xff0c;ZooKeeper 扮演了一个重要的角色&#xff0c;可以提供以下功能&#xff1a; ZooKeeper 是一个开…

2023年05月 C/C++(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题:数字放大 给定一个整数序列以及放大倍数x,将序列中每个整数放大x倍后输出。 时间限制:1000 内存限制:65536 输入 包含三行: 第一行为N,表示整数序列的长度(N ≤ 100); 第二行为N个整数(不超过整型范围),整数之间以一个空格分开; 第三行包含一个整数(不超过整…

【RocketMQ】SpringBoot集成RocketMQ

SpringBoot集成RocketMQ 首先依旧是引入依赖 <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId><version>2.2.2</version> </dependency>然后就可以编写发送不同类…

Vue2-全局事件总线、消息的订阅与发布、TodoList的编辑功能、$nextTick、动画与过渡

&#x1f954;&#xff1a;高度自律即自由 更多Vue知识请点击——Vue.js VUE2-Day9 全局事件总线1、安装全局事件总线2、使用事件总线&#xff08;1&#xff09;接收数据&#xff08;2&#xff09;提供数据&#xff08;3&#xff09;组件销毁前最好解绑 3、TodoList中的孙传父&…

【Git】Git中用到的一些命令

Git文件有四种状态&#xff1a; 未跟踪未修改&#xff08;已跟踪&#xff09;已修改&#xff08;已跟踪&#xff09;已暂存&#xff08;已跟踪&#xff09; 通常我们将项目clone下来就会处于已跟踪状态 1、git diff命令 git diff&#xff1a;查看没有暂存的文件更新哪些部分…

js判断手指的上滑,下滑,左滑,右滑,事件监听 和 判断鼠标滚轮向上滚动滑轮向下滚动

js判断手指的上滑&#xff0c;下滑&#xff0c;左滑&#xff0c;右滑&#xff0c;事件监听 和 判断鼠标滚轮向上滚动滑轮向下滚动 pc端 判断鼠标滚轮向上滚动滑轮向下滚动 const scrollFunc (e) > { e e || window.event; let wheelDelta e.wheelDelta ? e.wheelDelta…