好用的vue瀑布流插件-vue-masonry
话不多说,安排起来~~~
首先安装
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
有其他好用的瀑布流插件的话,都分享分享哈
好用的vue瀑布流插件-vue-masonry相关推荐
- 瀑布流插件|jquery.masonry|使用demo
Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <me ...
- 手把手带你使用Vue实现一个图片水平瀑布流插件
如何使用Vue实现一个图片水平瀑布流插件?这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助. 一.需求来源 今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我 ...
- vue瀑布流 - vue-waterfall-easy
尝试过几个瀑布流插件,这个插件还挺好用的. 1. npm安装 npm install vue-waterfall-easy --save-dev 2. 直接看demo效果吧... <templa ...
- react 原生html 插件,纯原生JS的瀑布流插件Macy.js,前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
- html5 原生插件,前端必备插件之纯原生JS的瀑布流插件Macy.js
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比 ...
- 【瀑布流插件】vue-masonry
**最近一直在画静态页面,有个图片列表, 布局很紧凑,图片宽度一样,高度不一样, 但是效果图上都是紧挨在一起,我用普通的v-for循环加css布局, 它会以这一行最高的那张图片的高度为准, 导致图片高 ...
- 瀑布流插件vue-masonry
前言 之前其实有分享过一篇纯CSS实现瀑布流的方法: https://oliver.blog.csdn.net/article/details/126450691,但纯CSS实现的方案都不是比较好的方 ...
- 瀑布流代码PHP,JS代码实现瀑布流插件
瀑布流布局中的图片有一个核心特点-等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.本文主要和大家详细分析了一个原生JS实现瀑布流插件以及代码相关讲解,对此有 ...
- masonry ajax瀑布流,jquery.masonry瀑布流插件的4个使用步骤
解释:很简单,就是把下载之后的脚本文件嵌入到你想使用2.瀑布流布局样式代码 .container-fluid { padding: 20px; } .box { margin-bottom: 20px ...
最新文章
- 新手必看的编程介绍,帮你推荐学习方案!
- Aarch64汇编语言
- linux修改网卡文件夹,CentOS7 修改网卡名称为eth0在VMWare中添加多网卡配置
- 简述一下动态sql的执行原理_简述一下Pogo Pin电连接器的设计原理和考虑因素
- 老布特木糖醇蛋卷鸡蛋味
- android点击通知后消失,通知栏点击后消失解决方法
- Redis学习总结(13)——分布式之数据库和缓存双写一致性方案解析!
- SpringBoot实战教程(5)| 整合Freemaker
- Kotlin 丢失了一些 JRE 类
- 河北工程大学计算机科学与技术分数线,河北工程大学计算机科学与技术专业2016年在河南理科高考录取最低分数线...
- bios sgx需要开启吗_Win10改Win7,UEFI改Legacy 启动,修改BIOS大全
- 如何对研发团队绩效进行考核--附各环节人员考核参考表
- kali 解压rar
- 增加对IE11的兼容
- hdoj 4417 Super Mario 【树状数组 + 思维】
- 脑电图机器学习笔记(一):机器学习脑电图.edf格式数据处理
- Ubuntu18.04安装evo及简单使用方法
- python-点击消除
- 关于土地补偿费归谁所有
- 青龙面板教程(四):线报监控系统开发
热门文章
- 论文阅读:Attention-based Dropout Layer for Weakly Supervised Object Localization
- SDWebImage详细解析
- CIO40: 学习.遇见更优秀的自己
- npm‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件
- 人脸识别接口_人脸识别双模摄像头解析,免费搭配活体检测
- 云原生---docker
- Linux进程的创建
- 计算机网络(三):IP协议,路由器转发,路由器和交换机的区别
- 【ML】MoG与EM:从MoG到EM
- idea打包提示程序包不存在如何解决?