瀑布流插件vue-masonry
前言
之前其实有分享过一篇纯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
![](/assets/blank.gif)
这也就代表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>
效果图如下:
![](/assets/blank.gif)
参数
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将要重新排布,这个排布的过程是动画化的,这个动画持续时间即这里设定的时间~
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的小
![](/assets/blank.gif)
因此,这种情况下,我们就需要使用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>
结果如下:
![](/assets/blank.gif)
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>
效果图如下:
![](/assets/blank.gif)
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>
效果图如下:
![](/assets/blank.gif)
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实现,否则还是建议使用一些功能已经相对完善的第三方插件来帮助我们实现功能~
瀑布流插件vue-masonry相关推荐
- 瀑布流插件|jquery.masonry|使用demo
Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <me ...
- masonry ajax瀑布流,jquery.masonry瀑布流插件的4个使用步骤
解释:很简单,就是把下载之后的脚本文件嵌入到你想使用2.瀑布流布局样式代码 .container-fluid { padding: 20px; } .box { margin-bottom: 20px ...
- 好用的vue瀑布流插件-vue-masonry
话不多说,安排起来~~~ 首先安装 npm install vue-masonry --save 其他安装方法,cdn方式都可,本人习惯使用npm了 然后全局引入 import Vue from 'v ...
- 手把手带你使用Vue实现一个图片水平瀑布流插件
如何使用Vue实现一个图片水平瀑布流插件?这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助. 一.需求来源 今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我 ...
- react 原生html 插件,纯原生JS的瀑布流插件Macy.js,前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
- html5 原生插件,前端必备插件之纯原生JS的瀑布流插件Macy.js
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比 ...
- 【瀑布流插件】vue-masonry
**最近一直在画静态页面,有个图片列表, 布局很紧凑,图片宽度一样,高度不一样, 但是效果图上都是紧挨在一起,我用普通的v-for循环加css布局, 它会以这一行最高的那张图片的高度为准, 导致图片高 ...
- Jquery瀑布流插件wookmark
瀑布流布局在现在的网页设计里面可谓是相当的流行的,从网页到手机应用,都能见到瀑布流的身影.相比较手机应用来说,感觉网页上的瀑布流布局效果实现简单很多,因为我们有现成的jQuery插件可以用,只要稍微的 ...
- 瀑布流代码PHP,JS代码实现瀑布流插件
瀑布流布局中的图片有一个核心特点-等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.本文主要和大家详细分析了一个原生JS实现瀑布流插件以及代码相关讲解,对此有 ...
最新文章
- Spring配置iBatis多个SqlMapConfig.xml
- VTK:图片之DotProduct
- php strtotime month bug,处理PHP strtotime的BUG
- 约束布局constraint-layout导入失败的解决方案 - 转
- 最接近原点的 k 个点_第K个最接近原点的位置
- source 1.5 中不支持 diamond 运算符
- 深度学习 《LSTM和GRU模型》
- python学习之路-day8
- .NET开发中你可能会用到的常用方法总结(添加ing...)
- [翻译]关于Swift的编译时间优化
- 使用NUnit进行DotNet程序测试
- HIVE存储(四)ORCFile
- mtr 检测网络 查看服务器网络是否丢包
- WEB基础之:CSS字体
- 生产环境 java.util.concurrent.RejectedExecutionException: event executor terminated 错误分析
- CTWAP、CTNET、彩信
- CSU——1043克里莫
- 家庭媒体中心NAS方案设计
- 【Hackintosh】完善篇之添加节能5项与添加SMBU/SBUS
- python对人工智能的看法_为什么人工智能用python