基于vue的 瀑布流布局插件 vue-falls

本文主要是介绍基于vue的 瀑布流布局插件 vue-falls，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

瀑布流布局的好处

由于开发中很多场景我们需要用作展示的图片，比例都是不一致的，开发过程中布局和图片的比例很难取舍，经常会发生图片变形的情况，瀑布流最大的好处应该就是取了美观和图片比例的中间点

构建目标

• 当图片加载失败时，不做显示
• 图片进行预加载，提升用户体验
• 每次添加图片的时候保证往最短的列插入
• 保证图片比例，高度由图片高度等比例撑开

效果

图片一般从后台接口获取，演示我就拿了几张图片比例不一致的做示范

布局后的效果

用法 （和elementUI等ui插件一样）

• 项目中安装npm包

// 安装开发依赖
npm i vue-falls --save

• 安装成功后，在项目中引入

// main.js 中全局引入 注意 Vue.use要在new Vue实例之前
import falls from 'vue-falls'
Vue.use(falls)

• 组件内使用

 <vue-falls :photoList="photoList" :row="row" @onClick="click" width="500"></vue-falls>

• 参数说明

参数	默认值	类型	示例	说明
photoList	[]	array	[{url:‘path’},{url:‘path’}]	图片list,每个item至少包含url
row	2	number	5	要显示的排数，默认显示2排
width	100%	string	'500 ’	整个容器的宽度，默认100%

• 事件回调
  onClick点击每一个图片时候触发，返回当前点击photoList的item

这篇关于基于vue的 瀑布流布局插件 vue-falls的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---