vue瀑布流布局插件vue-masonry

插件npm网址 https://www.npmjs.com/package/vue-masonry
github ：https://github.com/shershen08/vue-masonry
安装 npm install vue-masonry --save || yarn add vue-masonry --save

//main.js
import {VueMasonryPlugin} from 'vue-masonry'
Vue.use(VueMasonryPlugin)

<div v-masonry transiton-duration="0.3s" item-selector=".card" gutter="10"><div v-masonry-tile class="card" v-for="(item,index) in testData" :key="index" >/*内容*/</div>
</div>

一些属性
this.$redrawVueMasonry(); 重加载
item-selector=".item" 列表DOM项目选择器（类）
transition-duration="0.3s 过渡效果
gutter=".gutter-block-selector 项目元素之间的水平间距

vue3

1.重加载

import { defineComponent, ref, nextTick, getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
const _this = instance.appContext.config.globalProperties;_this.$redrawVueMasonry();

vue瀑布流布局插件vue-masonry相关推荐

好用的vue瀑布流插件-vue-masonry
话不多说,安排起来~~~ 首先安装 npm install vue-masonry --save 其他安装方法,cdn方式都可,本人习惯使用npm了然后全局引入 import Vue from 'v ...
瀑布流插件|jquery.masonry|使用demo
Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <me ...
Vue Google浏览器插件 Vue Devtools无法使用的解决办法
1.插件安装不必多说一定要用Vue.js 开发版 Vue.min.js 在控制面板就不会显示 2.本地调试用的是file://协议修改插件允许访问文件网址打上对勾转载于:https ...
用Bootstrap实现mansory网格瀑布流布局插件
下载地址 mpmansy.js是基于Bootstrap的mansory网格瀑布流布局jQuery插件.通过该插件可以非常轻松的实现瀑布流效果,它通过断点来控制响应式效果,非常实用.参数解释childr ...
用vue写了个瀑布流布局，看着还可以
源博文发布于2018-10-11 (由于收到建议,在vue中v-for的优先级高于v-if的优先级,这意味着v-if 将分别重复运行于每个 v-for 循环中所以,不推荐v-if和v-for同时使用) ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
Vue的使用 -- 基于Vue搭建前端页面
Vue的使用 – 基于Vue搭建前端页面首先,用到的前端技术只有 Vue.Element-ui.axios.Echarts,至于其它的技术点,我一个后端很少接触. 其次,Echarts 我也不怎么会 ...
vue 实现瀑布流布局的组件/插件总汇：vue-waterfall、vue-waterfall-easy、vue-virtual-collection、vue-grid-layout
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 瀑布流作为当前比较流行的一种网页布局方式,在视觉上呈现出参差不齐.琳琅满目.唯美的视觉效果,该布局随 ...
手把手带你使用Vue实现一个图片水平瀑布流插件
如何使用Vue实现一个图片水平瀑布流插件?这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助. 一.需求来源今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我 ...

vue瀑布流布局插件vue-masonry

vue3

vue瀑布流布局插件vue-masonry相关推荐

最新文章

热门文章