构建目标

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

// 安装开发依赖
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

• 维护 email:[email protected] csdn:https://blog.csdn.net/shmilylxy11/article/details/106580463