vue瀑布流（图片+摘要）

产品需求，pc端添加图片瀑布流。废话少说直接上干货。
简介：我使用的是vue-waterfall2+vue-lazyload两个插件。
特点：使用简单，自定义样式修改灵活方便。

Use：
npm install vue-waterfall2@latest --save
npm install vue-lazyload --save
首先在mian.js中直接引入：
import waterfall from ‘vue-waterfall2’;
import VueLazyload from ‘vue-lazyload’;
Vue.use(waterfall);
Vue.use(VueLazyload);

然后即可全局引入使用。在你需要的组件中使用即可。
结构如下，可做参考：
data中定义：
showLoading: true,//是否加载loading
noMore: false,//无数据展示
loadDistance: 50, //加载间隔
col: 4,//展示列数
lazyDistance: 150,//懒加载间隔
imgsArr:[],//数据

<waterfall
class=“waterfall-image”
:col=“col”
:data=“imgsArr”
:loadDistance=“loadDistance”
@loadmore=“getScrollPosition”
>

加载中

没有更多数据了

样式根据自己需要可调，很灵活。
github：https://github.com/AwesomeDevin/vue-waterfall2。