【瀑布流插件】vue-masonry
**最近一直在画静态页面,有个图片列表,
布局很紧凑,图片宽度一样,高度不一样,
但是效果图上都是紧挨在一起,我用普通的v-for循环加css布局,
它会以这一行最高的那张图片的高度为准,
导致图片高度小的,下一行不能紧挨在一起**
如图:
但是我要的效果是这样的,如图:
依靠vue-masonry,实现了一些简单的功能,可参考这篇文章,讲的比较详细
《Vue插件》瀑布流插件vue-masonry的使用与踩坑记录
npm install vue-masonry
在main.js里
import { VueMasonryPlugin } from "vue-masonry";
Vue.use(VueMasonryPlugin);
在要用到的页面
import Masonry from "masonry-layout";
<div class="discover" v-masonry><divv-for="(v, ix) in discoverImg":key="ix"class="discoveImg"v-masonry-tile><img :src="v.img" alt="" /></div>
css部分
.discover {height: 100% !important;}.discoveImg {float: left;padding: 10px;margin-right: 20px;margin-bottom: 20px;border-radius: 15px;img {width: 200px;}}
效果实现了,还是挺开心的
【瀑布流插件】vue-masonry相关推荐
- 瀑布流插件|jquery.masonry|使用demo
Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <me ...
- 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实现一个图片水平瀑布流插件?这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助. 一.需求来源 今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我 ...
- react 原生html 插件,纯原生JS的瀑布流插件Macy.js,前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
- html5 原生插件,前端必备插件之纯原生JS的瀑布流插件Macy.js
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比 ...
- 瀑布流插件vue-masonry
前言 之前其实有分享过一篇纯CSS实现瀑布流的方法: https://oliver.blog.csdn.net/article/details/126450691,但纯CSS实现的方案都不是比较好的方 ...
- Jquery瀑布流插件wookmark
瀑布流布局在现在的网页设计里面可谓是相当的流行的,从网页到手机应用,都能见到瀑布流的身影.相比较手机应用来说,感觉网页上的瀑布流布局效果实现简单很多,因为我们有现成的jQuery插件可以用,只要稍微的 ...
- 瀑布流代码PHP,JS代码实现瀑布流插件
瀑布流布局中的图片有一个核心特点-等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.本文主要和大家详细分析了一个原生JS实现瀑布流插件以及代码相关讲解,对此有 ...
最新文章
- 在校生如何快速提升竞争力
- 两种方法用于检查传入的数字是否为整数
- Spring的Web MVC –重定向到内存泄漏
- 面试大厂应该注意哪些问题?隔壁都馋哭了
- linux设备驱动学习,linux设备驱动学习4
- 在html中标题字号一共有几种,HTML中常用的几种标签
- c语言5版第10章答案,第10章 指 针 参考答案 c语言(1)
- 38.Linux/Unix 系统编程手册(下) -- 编写安全的特权程序
- /usr/bin/ld: reader.o: Relocations in generic ELF (EM: 62)
- 学术论文的定义、特点、写作方法以及写作格式
- 电脑网页截长屏最简单的方法
- python函数_列表入门
- java 金_Java初级黄金体验 其一
- 播放res/raw文件(MP4)
- 命名实体识别的一点经验与技巧
- oppop+r1c怎么设置语言中文,OPPO R1C怎么样 OPPO R1C手机评测 (全文)
- wps的流程图怎么导出_word流程图-WPS绘制流程图的正确打开方式,超级简单
- 总是腰疼背痛 竟是“穿错鞋”惹的祸
- AutoLisp从入门到放弃(十七)
- poj1330,JDOJ3055O(nlogn)做法