1.安装

npm install vue-masonry --save

2.在main.js中配置

import { createApp } from 'vue'

import App from './App.vue'

import { VueMasonryPlugin } from 'vue-masonry';

import mitt from 'mitt'

const emitter = mitt()

let app = createApp(App)

app.config.globalProperties.emitter = emitter

app.use(VueMasonryPlugin)

app.mount('#app')

3.就可以使用啦

<div v-masonry transition-duration="0.3s" i tem-selector=".item">

<div v-masonry-tile class="item" v-for="(item, index) in getList">

<!-- 你要渲染的图片啦,文字一类的代码块 -->

<img :src="item.image.small" alt="" />

</div>

</div>

vue3中瀑布流插件 vue-masonry 的使用相关推荐

  1. 瀑布流插件|jquery.masonry|使用demo

    Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <me ...

  2. masonry ajax瀑布流,jquery.masonry瀑布流插件的4个使用步骤

    解释:很简单,就是把下载之后的脚本文件嵌入到你想使用2.瀑布流布局样式代码 .container-fluid { padding: 20px; } .box { margin-bottom: 20px ...

  3. 手把手带你使用Vue实现一个图片水平瀑布流插件

    如何使用Vue实现一个图片水平瀑布流插件?这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助. 一.需求来源 今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我 ...

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

    话不多说,安排起来~~~ 首先安装 npm install vue-masonry --save 其他安装方法,cdn方式都可,本人习惯使用npm了 然后全局引入 import Vue from 'v ...

  5. 瀑布流插件vue-masonry

    前言 之前其实有分享过一篇纯CSS实现瀑布流的方法: https://oliver.blog.csdn.net/article/details/126450691,但纯CSS实现的方案都不是比较好的方 ...

  6. react 原生html 插件,纯原生JS的瀑布流插件Macy.js,前端必备插件

    这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...

  7. html5 原生插件,前端必备插件之纯原生JS的瀑布流插件Macy.js

    这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比 ...

  8. 【瀑布流插件】vue-masonry

    **最近一直在画静态页面,有个图片列表, 布局很紧凑,图片宽度一样,高度不一样, 但是效果图上都是紧挨在一起,我用普通的v-for循环加css布局, 它会以这一行最高的那张图片的高度为准, 导致图片高 ...

  9. Jquery瀑布流插件wookmark

    瀑布流布局在现在的网页设计里面可谓是相当的流行的,从网页到手机应用,都能见到瀑布流的身影.相比较手机应用来说,感觉网页上的瀑布流布局效果实现简单很多,因为我们有现成的jQuery插件可以用,只要稍微的 ...

  10. 原生 JS 实现一个瀑布流插件

    更好的阅读体验,点击 原文地址 瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探 ...

最新文章

  1. 黑帽SEO:Google为什么会屏蔽你的网站
  2. (PHP7内核剖析-3) 变量
  3. 摘自ubantuer-Linux防火墙iptables学习笔记(三)iptables命令详解和举例
  4. ISA2006之工作组环境下的阵列部署
  5. 尚学堂requireJs课程---1、作用域回顾
  6. android 模拟点击 不发出声音,【Android】代码实现模拟屏幕点击和键盘按键事件...
  7. python 多线程入门试验
  8. exit(0)与exit(1)、return区别
  9. map分组后取前10个_map根据属性排序、取出map前n个
  10. caffe各种依赖包配置
  11. java conterller_java后台controller能否直接接收list
  12. JavaScript 省市县数据
  13. delphi 连接网口打印机 发送指令打印二维码
  14. 算法工程师书籍推荐——典藏版
  15. LabVIEW编程LabVIEW控制PXI-5122例程与相关资料
  16. jQuery弹出层插件Dialog
  17. 论文学习笔记:PoseFix: Model-agnostic General Human Pose Refinement Network
  18. 修改植物大战僵尸游戏存档(Java实现版)
  19. java飞鸽传书_java简单版飞鸽传书
  20. 赛门铁克推Android手机诺顿安全应用

热门文章

  1. Unreal Engine 4学习资料整理
  2. EasyExcel导出合并单元格
  3. 软件测试工程师自我介绍范文_软件测试工程师面试英文自我介绍范文
  4. 中国网络视频前景 表面云淡风轻实在暗潮汹涌
  5. 会考计算机基本知识点总结,高中计算机会考基本知识点
  6. 什么才是真正的高级程序员
  7. 书摘---创业36条军规2:创业的三大条件
  8. 时光轴全新导购网站购物新体验
  9. 关于手机传感器,你需要了解的一些(一)
  10. 财报识别OCR,披露虚假财务报表