vue3使用vue-masonry插件实现瀑布流

《Vue插件》瀑布流插件vue-masonry的使用与踩坑记录
参数:
item-selector
transition-duration
column-width
origin-left
origin-top
gutter


前言:
之前其实有分享过一篇纯CSS实现瀑布流的方法: https://oliver.blog.csdn.net/article/details/126450691,但纯CSS实现的方案都不是比较好的方案,总归有一些各式各样的局限性,因此,有了本文,记录分享一下vue中比较好用的一个瀑布流插件——vue-masonry,GitHub上将近600个star,个人推荐~
注意:以下vue-masonry相关分享与踩坑解决的问题版本为0.16.0;

官网
官网地址:https://masonry.desandro.com/,但文本的主要的信息来源来自于GitHub的README,地址如下:https://github.com/shershen08/vue-masonry#readme
有兴趣的小伙伴可以自行浏览~当然插件本身可以适用于很多平台,Vue仅仅是其中之一;

安装与使用
由于是集成在Vue中的,绝大多数Vue都是基于Vue-Cli搭建的项目,script标签这种…应该很少见吧,因此就不过多涉及了,以vue-cli为主,

// 安装

npm install vue-masonry -S


注意的是,vue-masonry没有对应的@types/vue-masonry


这也就代表vue-masonry 没有对应的类型描述,当然,也不需要,即使你的项目是Vue3+TypeScript也不需要安装类型描述文件,以Vue3+Ts的项目为例,当安装完成后,直接在main.ts文件中引入即可,引入代码如下:

import { VueMasonryPlugin } from 'vue-masonry';app.use(VueMasonryPlugin);


常规,简单的引入,即可正常使用;

基本使用
vue-masonry的使用核心在于自定义指令:v-masonry 和 v-masonry-tile,这个是整个瀑布流插件的使用核心,

<div v-masonry><div v-masonry-tile v-for="(item, index) in blocks"><!-- block item markup --></div>
</div>


v-masonry: 绑定在父级容器上;
v-masonry-tile: 绑定在子级容器上;


示例:
直接看个例子吧

<div v-masonry class="container"><divv-masonry-tilev-for="(item, index) in demoList":class="`demo-${item}`":key="index"><div></div></div>
</div>


效果图如下:


参数
item-selector
接收一个字符串作为参数,官方原文解释:list element DOM item selector,作用是选择哪些列作为瀑布流的列,比如:
<div v-masonry item-selector=".demo-2" class="container"><divv-masonry-tilev-for="(item, index) in demoList":class="`demo-${item}`":key="index"><div></div></div>
</div><script lang="ts" setup>
import { Ref, ref } from "vue";const demoList: Ref<number[]> = ref([1, 2, 1, 3, 4]);
</script>


示例中item-selector的值是".demo-2",代表只有类名中包含.demo2的DOM,都会被拉入瀑布流的布局,如果不包含,那么依旧会按原来的规则进行布局;

transition-duration
接收一个字符串作为参数,官方原文解释:duration of transitions,作用是设定动画改变的持续时间,比如:
<div v-masonry transition-duration="0.2s" class="container"><divv-masonry-tilev-for="(item, index) in demoList":class="`demo-${item}`":key="index"><div></div></div>
</div>


这个属性是动画持续时间,比如,当父级容器的宽度尺寸发生变化了,理所当然的里面的瀑布流布局也会随之发生变化,所有基于瀑布流的DOM将要重新排布,这个排布的过程是动画化的,这个动画持续时间即这里设定的时间~ 在项目中我设置为0 这样的话他就不会出现数据从上而下的状态

column-width
接收一个字符串作为参数,官方原文解释:element selector for column width. Can be a selector string or a number,简单的说就是设定一个基准列宽,大致用法如下:
<div v-masonry column-width=".demo-1" class="container"><divv-masonry-tilev-for="(item, index) in demoList":class="`demo-${item}`":key="index"><div></div></div>
</div>


默认情况下vue-masonry会以第一个元素的宽度作为默认排序,也就是说如果第一个元素的非最小单位的基准元素,那么整个瀑布流的布局都会乱,因此需要通过column-width修改;
举个例子吧,看一段代码

<div v-masonry class="container"><div v-masonry-tile class="demo-2"></div><div v-masonry-tile class="demo-1"></div><div v-masonry-tile class="demo-1"></div>
</div>


整个瀑布流布局的列宽会以demo-2的列宽为标准,因此,即使demo-1的宽度比demo-2的小


因此,这种情况下,我们就需要使用column-width指定基准列宽,将column-width的值设定为demo-1

<div v-masonry column-width=".demo-1" class="container"><div v-masonry-tile class="demo-2"></div><div v-masonry-tile class="demo-1"></div><div v-masonry-tile class="demo-1"></div>
</div>


结果如下:


origin-left
官方原文解释:set to group elements to the right instead of left by default,设置X轴的排序方式,默认从左往右排序,设定后可从右向左排序
<template><div v-masonry origin-left="false" class="container"><divv-masonry-tilev-for="(item, index) in demoList":class="`demo-${item}`":key="index"><div></div></div></div>
</template>


效果图如下:


origin-top
官方原文解释:set to group elements to the bottom instead of top by default,设置Y轴的排序方式,默认从上往下排序,设定后可从下向上排序

<template><div v-masonry origin-top="false" class="container"><divv-masonry-tilev-for="(item, index) in demoList":class="`demo-${item}`":key="index"><div></div></div></div>
</template>



效果图如下:


gutter
官方原文解释:specifies [horizontal space between item elements]. Can be a selector string or a number. (https://masonry.desandro.com/options.html#gutter). Set gutter to an Element or Selector String to use the outer width of the element,简单的说,就是用来设置列宽,
具体效果可以看原文中的这个链接,说明的已经非常详细了:https://masonry.desandro.com/options.html#gutter,当然由于这是在Vue中使用,因此还是要通过属性的方式注入,比如
<template><div v-masonry gutter="10" class="container"><divv-masonry-tilev-for="(item, index) in demoList":class="`demo-${item}`":key="index"><div></div></div></div>
</template>


小结
还有一些属性,感觉不是太重要,因此有兴趣的小伙伴可以自行尝试,问题不大,接着,对比下来不难发现,纯CSS用法还是非常捡漏的,如果真的是实用与项目中,除非是极其简单的应用,可以考虑用纯CSS实现,否则还是建议使用一些功能已经相对完善的第三方插件来帮助我们实现功能~
 

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

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

相关文章

C //练习 6-4 编写一个程序,根据单词的出现频率按降序打印输入的各个不同单词,并在每个单词的前面标上它的出现次数。

C程序设计语言 &#xff08;第二版&#xff09; 练习 6-4 练习 6-4 编写一个程序&#xff0c;根据单词的出现频率按降序打印输入的各个不同单词&#xff0c;并在每个单词的前面标上它的出现次数。 注意&#xff1a;代码在win32控制台运行&#xff0c;在不同的IDE环境下&#…

vivado RTL运行方法检查、分析方法报告、报告DRC

运行方法检查 Vivado Design Suite提供基于超快设计的自动化方法检查使用“报告方法论”命令的FPGA和SoC&#xff08;UG949&#xff09;方法论指南。您可以生成关于打开、详细阐述、综合或实现的方法论报告设计对于详细设计&#xff0c;方法报告会检查XDC和RTL文件。对于有关使…

阿里云国外云服务器多少钱?2024年最新价格

阿里云国外服务器优惠活动「全球云服务器精选特惠」&#xff0c;国外服务器租用价格24元一个月起&#xff0c;免备案适合搭建网站&#xff0c;部署独立站等业务场景&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云国外服务器优惠活动&#xff1a; 全球云服务器精选特惠…

odoo 一日一技 系统参数 config_parameter

# 基础介绍 在Odoo中&#xff0c;ir.config_parameter是一个特殊的模型&#xff0c;它用于存储全局配置参数。这些参数是全局的&#xff0c;可以在任何地方访问&#xff0c;而且它们的值在数据库中是持久化的。 你可以使用config_parameter模型来存储各种配置数据&#xff0c;…

汇编指令retn和retn x的区别

在32位汇编语言中&#xff0c;retn 和 retn 16 指令用于从子过程&#xff08;或函数&#xff09;返回&#xff0c;但它们之间有一些区别。 retn&#xff1a; retn 指令没有附加的立即数参数。当执行 retn 指令时&#xff0c;控制权返回到调用该过程的地址&#xff0c;但不会对…

Web Animation API

工作中经常会遇到需要动画的场景&#xff0c;连贯动画都是用CSS实现&#xff0c;&#xff0c;但是如果遇到需要用户互动介入的动画&#xff0c;那纯CSS很比较吃力&#xff0c;也不是不能实现&#xff0c;需要动态修改CSS变量&#xff0c;而且动画容易被JS代码阻塞&#xff0c;导…

XSS漏洞:xss.haozi.me靶场通关

xss系列往期文章&#xff1a; 初识XSS漏洞-CSDN博客 利用XSS漏洞打cookie-CSDN博客 XSS漏洞&#xff1a;xss-labs靶场通关-CSDN博客 XSS漏洞&#xff1a;prompt.mi靶场通关-CSDN博客 目录 0x00 0x01 0x02 0x03 0x04 0x05 0x06 0x07 0x08 0x09 0x0A 0x0B 0x0C…

【C++干货铺】红黑树 (Red Black Tree)

个人主页点击直达&#xff1a;小白不是程序媛 C系列专栏&#xff1a;C干货铺 代码仓库&#xff1a;Gitee 目录 前言 红黑树的概念 红黑树的性质 红黑树结点的定义 红黑树的插入操作 插入新的结点 检查规则进行改色 情况一 情况二 情况三 插入完整代码 红黑树的验…

母线温度预测业务需求设计

1、需求背景 需求对象&#xff1a;设备使用方、设备维修人员 使用场景&#xff1a;使用方需要对母线温度进行实时监测和预警&#xff0c;及时排除安全隐患&#xff0c;保证长期正常运行。 使用目的&#xff1a;准确预测母线的未来温度&#xff0c;对于可能存在的隐患提前预警…

OpenCV-Python(43):姿势估计

目标 学习了解calib3D 模块学习在图像中创建3D效果 calib3D模块 OpenCV-Python的calib3D模块是OpenCV库中的一个重要模块&#xff0c;用于摄像头标定和三维重建等计算机视觉任务。该模块提供了一些函数和类&#xff0c;用于摄像头标定、立体视觉和三维重建等方面的操作。 下…

MySQL语句 | 使用WITH子句和临时表达式进行数据分析和筛选

MySQL支持使用WITH创建临时表达式&#xff0c;通常称为"Common Table Expressions"&#xff08;CTE&#xff09;。CTE 通常用于较复杂的查询&#xff0c;为复杂查询提供了一种更清晰、模块化的方式&#xff0c;以提高复杂查询的可读性和易维护性。 举个通用的例子 …

MySQL-索引的介绍和使用

MySQL 支持哪些类型的索引&#xff1f; 主键索引&#xff08;Primary Key Index&#xff09; 唯一索引&#xff08;Unique Index&#xff09; 普通索引&#xff08;Normal Index&#xff09; 全文索引&#xff08;Full-text Index&#xff09; 组合索引&#xff08;Composite …

apache seatunnel web 安装部署

下载文件 apache-seatunnel-2.3.3-bin.tar.gz apache-seatunnel-web-1.0.0-bin.tar.gz download_datasource.sh 准备工作 解压文件tar -zxvf apache-seatunnel-2.3.3-bin.tar.gz tar -zxvf apache-seatunnel-web-1.0

《动手学深度学习》学习笔记 第10章 注意力机制

文章目录 本系列为《动手学深度学习》学习笔记10.1 注意力提示10.1.1 生物学中的注意力提示10.1.2 查询、键和值10.1.3 注意力的可视化 10.2 注意力汇聚&#xff1a;Nadaraya-Watson 核回归10.2.1 生成数据集10.2.2 平均汇聚10.2.3 非参数注意力汇聚10.2.4 带参数注意力汇聚10.…

Python用selenium实现自动登录和下单的项目实战

前言 学python对selenium应该不陌生吧 Selenium 是最广泛使用的开源 Web UI&#xff08;用户界面&#xff09;自动化测试套件之一。Selenium 支持的语言包括C#&#xff0c;Java&#xff0c;Perl&#xff0c;PHP&#xff0c;Python 和 Ruby。目前&#xff0c;Selenium Web 驱动…

openssl3.2 - 官方demo学习 - test - certs

文章目录 openssl3.2 - 官方demo学习 - test - certs概述笔记.sh的执行语句打印的方法要修改的实际函数备注END openssl3.2 - 官方demo学习 - test - certs 概述 官方demos目录有证书操作的例子 已经做了笔记 openssl3.2 - 官方demo学习 - certs 但是这个demos/certs目录的脚…

安卓屏幕自动息屏时亮度突然变亮

自然息屏流程 USER_ACTIVITY_SCREEN_BRIGHT&#xff08;亮屏&#xff09; → USER_ACTIVITY_SCREEN_DIM&#xff08;DIM&#xff09; → USER_ACTIVITY_SCREEN_DREAM&#xff08;灭屏&#xff09;变化&#xff0c;最终进入ASLEEP后。在息屏时会执行一个变暗的动画 frameworks\…

鸿蒙应用开发-请求语音合成服务获取音频文件

功能介绍&#xff1a; 请求语音合成服务&#xff0c;通过上传语音合成文本&#xff0c;返回音频数据&#xff0c;并保存到本地。这里要说明一下&#xff0c;由于HttpResponse接口给问题&#xff0c;服务的响应类型必须是application/octet-stream&#xff0c;才能正确获取音频…

C# 数据类型与类型转换:包含教程与示例

C# 数据类型 C# 中的变量必须是指定的数据类型&#xff1a; int myNum 5; // 整数&#xff08;整数&#xff09; double myDoubleNum 5.99D; // 浮点数 char myLetter D; // 字符 bool myBool true; // 布尔 string myText "Hello…

【知识---如何进行图像数据的归一化呢(normalize)】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言范围归一化均值和标准差归一化&引申总结 前言 在做基于图像的目标检测遇到了图像的归一化操作&#xff0c;为此展开了一定的探讨&#xff1a; 图像归一化…