好用的vue瀑布流插件-vue-masonry

2023-05-16

话不多说,安排起来~~~
首先安装

npm install vue-masonry --save

其他安装方法,cdn方式都可,本人习惯使用npm了
然后全局引入

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

html遍历渲染数据

<div v-masonry  transition-duration="0.3s" i tem-selector=".item">
    <div v-masonry-tile class="item" v-for="(item, index) in blocks">
       <!-- 你要渲染的图片啦,文字一类的代码块 -->
    </div>
</div>

一些属性的总结:
item-selector=".item" -列表元素DOM项目选择器
transition-duration="0.3s -过渡期
column-width="#test"-列宽的元素选择器。可以是选择器字符串或数字
origin-left="false" -设置为将元素分组到右侧而不是默认情况下的左侧
gutter=".gutter-block-selector"-指定[项目元素之间的水平间距
fit-width="true" -设置容器的宽度以适合可用的列数
horizontal-order="true" -布置物品以(大部分)保持水平的从左到右的顺序
主要使用的也就这么多~~~,这些都是简单的实现排版的效果,
滑动加载什么的效果也没有,根据自己需要使用哈
官网地址:https://www.npmjs.com/package/vue-masonry
有其他好用的瀑布流插件的话,都分享分享哈

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

好用的vue瀑布流插件-vue-masonry 的相关文章

  • 【2022春招研发】字节笔试记录(测试方向)

    20220410字节笔试 测试方向 文章目录 20220410字节笔试 测试方向一 编程题2道 xff08 50分 xff09 二 单选题10道 xff08 20分 xff09 三 多选题10道 xff08 30分 xff09 一 编程题2
  • 浏览器主页被劫持篡改了怎么办

    就想下载个驱动 xff0c 结果一通操作把我的 Edge 浏览器主页篡改成了 桔梗网 xff0c 就下面这个网站 算了不喷它了 xff0c 来说说怎么改回去吧 其他浏览器的修改方式相同 找到 Microsoft Edge 浏览器的桌面快捷方
  • 【2022春实习】百度笔试记录(机器学习/数据挖掘/自然语言)

    20220412百度笔试 机器学习 数据挖掘 自然语言 文章目录 20220412百度笔试 机器学习 数据挖掘 自然语言一 选择题30道 xff08 60分 xff09 二 问答题1道 xff08 20分 xff09 三 系统设计题1道 x
  • 【算法工程师】华为技术面面试记录

    20220419华为技术面 面试岗位是算法工程师 文章目录 20220419华为技术面1 自我介绍 2 算法题3 专业知识3 1 数据结构3 2 计算机网络3 3 操作系统3 4 设计模式3 5 机器学习3 6 其他 4 提问环节 1 自我
  • 操作系统实践06—线程

    操作系统实践06 线程 文章目录 操作系统实践06 线程1 创建线程1 1 原型1 2 线程参数1 3 参数类型1 4 例子一1 5 例子二 2 等待线程2 1 原型2 2 线程返回值2 3 例子一2 4 例子二 3 线程互斥3 1 初始化
  • VS Code指定扩展安装位置

    VS Code指定扩展安装位置 默认情况下 xff0c Windows vscode的安装路径为C Users 用户名 vscode extensions 如果想要自定义扩展的安装路径 xff0c 无法直接在vscode中修改 但是 xff
  • Ubuntu 网络配置顺序:(Ubuntu 16.4)

    网络配置顺序 xff1a xff08 Ubuntu 16 4 xff09 1 xff0c 网卡硬件 xff08 硬件 vm DHCP用NAT直接到物理网 xff0c 静态用桥接通过本地网络链接转发 xff09 xff0c 2 xff0c 系
  • C语言实现汉诺塔问题

    目录 一 程序 1 实现代码 2 程序执行结果 二 背景 1 汉诺塔问题描述 2 直观理解 3 思考过程 三 函数执行过程 举例 n 61 2 四 总结 递归问题 一 程序 1 实现代码 include lt stdio h gt 函数名
  • ubuntu 系统下运行DQN Flappy bird

    github链接 xff1a xff08 两个项目均可运行成功 xff0c 推荐第二个 xff0c 只有200多行 xff0c 好入门 xff09 https github com songrotek DRL FlappyBird http
  • eclipse中如何查看程序源码

    在eclipse中如何查看程序源码 1 查看方法 xff0c 按下Ctrl键同时 xff0c 用鼠标指向自己想要查看源码的关键字 xff0c 该字会出现下划线 xff0c 单击左键 xff0c 就可以进入源码查看了 2 在此前 xff0c
  • 基于51单片机的智能窗帘proteus仿真数码管显示

    硬件设计 该硬件设计是基于51单片机为MCU xff0c ADC采用ADC0804 xff0c 电机驱动芯片是L298 xff0c 显示部分采用的是4位数码管 ADC0804芯片的简介 xff1a 工作电压 xff1a 43 5V xff0
  • Mac VSCode 配置Gitee |使用Sourcetree关联Gitee仓库

    目录 一 使用Git的基本操作 xff08 如果只是想看如何上传到gitee的直接跳过这个 xff09 xff1a 1 安装插件GitLens 2 初始化 3 git文件 4 创建一个示例文件 5 操作日志 6 操作日志查看 7 版本回退
  • 马尔可夫链 以及 隐马尔可夫模型(HMM)

    背景 xff1a 马尔可夫过程 xff08 Markov process xff09 是一类随机过程 它的原始模型马尔科夫链 xff0c 由俄国数学家A A Markov于1907年提出 马尔可夫过程是研究离散时间动态系统状态空间的重要方法
  • AIOps探索:基于VAE模型的周期性KPI异常检测方法——VAE异常检测

    AIOps探索 xff1a 基于VAE模型的周期性KPI异常检测方法 VAE异常检测 参考文章 xff1a xff08 1 xff09 AIOps探索 xff1a 基于VAE模型的周期性KPI异常检测方法 VAE异常检测 xff08 2 x
  • 51单片机系列--蜂鸣器

    工作原理 蜂鸣器发声原理是电流通过电磁线圈 xff0c 使电磁线圈产生磁场来驱动振动膜发声的 xff0c 因此需要一定的电流才能驱动它 51单片机IO口输出的TTl电流无法驱动蜂鸣器 xff0c 故而蜂鸣器内部需要一个三极管来进行电流放大
  • debian9.8安装网卡驱动

    一 挂载本地镜像源 xff08 参考下面博客 xff09 debian9 8添加iso为本地源 weixin 46027366的博客 CSDN博客 二 配置安装所需环境 1 xff09 安装gcc和cmake xff0c 命令行输入如下命令
  • 浮点型数据的输入和输出(C语言)

    目录 1 浮点型数据的输入 1 1 单精度输入 1 2 双精度和长双精度 2 浮点型数据的输出 2 1 浮点数的默认输出 2 2 指定输出格式 m n f 2 3 输出示例 3 案例 3 1 案例 1 浮点型数据的输入 1 1 单精度输入
  • 开学送给她的礼物(Python实现)

    目录 1 卿为朝朝暮暮 2 情感起伏 3 礼物赠送 4 Python之实现turtle 1 卿为朝朝暮暮 先手抄一遍 xff0c 然后再键盘敲出来 xff1a 飞鸟集中的一句话 xff0c 改编的一首诗是过样的 浮世万千 xff0c 吾爱有
  • 最详细matlab 2018a安装教程步骤.

    链接 xff1a https pan baidu com s 1XjfAKeFY otNy7HfGhYQCw 提取码 xff1a cmzv 来自百度网盘超级会员V3的分享 1 鼠标右击 Matlab R2018a Win64 压缩包 xff
  • 牵着她——表白不成功算我输(Python实现)

    目录 1 牵着她的手一直走下去 2 一首小情诗送给甜甜的她 3 历史总结的哲学想法 4 表白不成功算我输 xff08 Python代码 xff09 1 牵着她的手一直走下去 今天牵着她的手 xff0c 她很贴心 一起并肩赏樱花 x1f338

随机推荐