瀑布流插件vue-masonry(使用和踩坑心得)适合Vue脚手架开发(适用于Vue2)
Vue-masonry快速上手(第3条最重要!)
之前在做项目时候,需要使用到瀑布流布局,在网上找了好久;一些文章要么内容不全,要么就是坑;本文章只会教你怎样快速上手,如果需要详细的学习,请前往https://www.npmjs.com/package/vue-masonry,好;话不多说,上代码:
1.首先npm安装 npm i vue-masonry
2.然后在main中进行引入,并且Use使用一下(如下图)
3 之后在使用瀑布流组件内引用
import Masonry from ‘masonry-layout’
- 然后在你需要进行展示的组件中,创建一个生命周期,在里面写入代码,图中的columnWidth看自己需求
- 在此附上源代码快,文中只需要关注父容器和子容器的class命名
html:
<div class="content" v-infinite-scroll="load" v-loading="loading" infinite-scroll-distance="1"><div v-for="(list, index) in imgs" :key="index" class="content_one"><img :src="list.URL" /></div></div>
css:
* {margin: 0;padding: 0;
}.content {width: 100%;height: 100% !important;
}.content>div {float: left;padding: 10px;
}.content>div>img {width: 400px;
}
Js:
updated() {var elem = document.querySelector('.content');//图片父容器var msnry = new Masonry(elem, {// optionsitemSelector: '.content_one',//图片子容器// columnWidth: 200, //列宽});},
本文如有错误或不当代码,可私信。
瀑布流插件vue-masonry(使用和踩坑心得)适合Vue脚手架开发(适用于Vue2)相关推荐
- 瀑布流插件|jquery.masonry|使用demo
Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <me ...
- 【瀑布流插件】vue-masonry
**最近一直在画静态页面,有个图片列表, 布局很紧凑,图片宽度一样,高度不一样, 但是效果图上都是紧挨在一起,我用普通的v-for循环加css布局, 它会以这一行最高的那张图片的高度为准, 导致图片高 ...
- 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实现一个图片水平瀑布流插件?这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助. 一.需求来源 今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我 ...
- 瀑布流插件vue-masonry
前言 之前其实有分享过一篇纯CSS实现瀑布流的方法: https://oliver.blog.csdn.net/article/details/126450691,但纯CSS实现的方案都不是比较好的方 ...
- react 原生html 插件,纯原生JS的瀑布流插件Macy.js,前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
- html5 原生插件,前端必备插件之纯原生JS的瀑布流插件Macy.js
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比 ...
- Jquery瀑布流插件wookmark
瀑布流布局在现在的网页设计里面可谓是相当的流行的,从网页到手机应用,都能见到瀑布流的身影.相比较手机应用来说,感觉网页上的瀑布流布局效果实现简单很多,因为我们有现成的jQuery插件可以用,只要稍微的 ...
- 瀑布流代码PHP,JS代码实现瀑布流插件
瀑布流布局中的图片有一个核心特点-等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.本文主要和大家详细分析了一个原生JS实现瀑布流插件以及代码相关讲解,对此有 ...
最新文章
- VMware Workstation 9下基于Ubuntu 12.10服务器版本的Hadoop集群的配置
- c++ 多线程 垃圾回收器_JVM的垃圾回收机制 总结(垃圾收集、回收算法、垃圾回收器)...
- base64加密原理及python、C语言代码实现
- 2017-10-9(Volley使用范例源码分析)
- Qt5 中 关于Widget Mapper的简单应用
- jQuery kxbdMarquee 无缝滚动
- html代码高亮带行号,kindeditor代码高亮自动行号功能
- 第二场周赛(递归递推个人Rank赛)——题解
- C# ASP.NET 转换为int型的方法 很实用
- 自己动手实现一个简单的 IOC,牛皮!!
- linux 中文件的操作
- 原来,我一直都不会用Windows
- PLC基础知识(一)—PLC入门简介
- Lottie 动画AE+Bodymovin导出的JSON文件解读
- apply update from ADB
- php 监控网页更新提醒,web网站股票自动监控提醒实时变化
- Flutter 闪屏页实现
- Flag:通过盲文+摩斯电码才能找到我
- [搞笑] 后舍男生最完美的视频收藏全纪录
- 推荐一款实用的用户画像工具--快鲸scrm
热门文章
- 使用svn报错之An error occurred while contacting the repository
- 河北农大计算机专业全国排名,2019河北农业大学现代科技学院专业排名
- vmware虚拟机centos7扩容
- 神奇英语语法系列(二)——名词性从句
- 职场一些办公技能和技巧总结
- 深度装N卡LINUX驱动 性能怎么样,讲解Deepin 20开源Nouveau和闭源NVIDIA驱动,附装闭源N卡驱动的方法...
- 中文大写日期转换函数
- 博科Brocade系列光纤交换机报价 程鹏宇 13829750520
- RMSE(均方根误差)、MSE(均方误差)、MAE(平均绝对误差)、SD(标准差)
- 山东计算机考研909,山东大学2018年计算机考研909数据结构考试大纲