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:[],//数据

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

















加载中

没有更多数据了


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

你可能感兴趣的:(vue,瀑布流,vue瀑布流)