这两天在搞峡谷流产业布局,后端用的vue,掰刺了很久,却是失利收场,网路上也搜寻了数个计划和提议,结论我那个大白菜依然未予的欢欣。

跋山涉水,看见两个网民所推荐了两个应用程序,真的极好,站在勇士手臂上,的确随心所欲多了。

应用程序上场:vue-waterfall-easy

最简单蛮横的形式,JS导入

总之了,你也能采用npm加装

npm install vue-waterfall-easy --save-dev

new Vue({

el : app,

components: {

vueWaterfallEasy

}

})

采用import提及

import vueWaterfallEasy from vue-waterfall-easy

new Vue({

el : app,

components: {

vueWaterfallEasy

}

})

在做峡谷流产业布局的时候,采用呢{图片+标题}的模式,所以采用了插槽,以及手动调用了取消滚动加载

瀑布流布局(css瀑布流布局)-第1张

一定要记得在组件上加上ref=waterfall,否则会undefined的

瀑布流布局(css瀑布流布局)-第2张

在 slot-scope="props"的div里,能自定义修改每个图片所需要的信息

{{props.value.name}}

:src="props.value.isDianZan == 0 ? https://g-shot.oss-cn-hangzhou.aliyuncs.com/h5/28ac6d226cb5526e/img/6-32.png: https://g-shot.oss-cn-hangzhou.aliyuncs.com/h5/28ac6d226cb5526e/img/6-31.png">

已经到底啦

import vueWaterfallEasy from ./vue-waterfall-easy/vue-waterfall-easy.vue

import axios from axios

export default {

name: app,

data() {

return {

imgsArr: [],

group: 0, // request param

}

},

components: {

vueWaterfallEasy

},

methods: {

getData() {

axios.get(./static/mock/data.json?group= + this.group) // 真实环境中,后端会根据参数group返回新的图片数组,这里我用两个惊呆json文件模拟

.then(res => {

this.imgsArr = this.imgsArr.concat(res.data)

this.group++

})

},

},

created() {

this.getData()

}

}

这里要注意,存图片链接的关键字必须是src,所以new了两个类来存所有从接口取到的要用到的值。

export class Img {

constructor({

id,

src,

isDianZan,

name

}) {

this.id = id

this.src = src

this.isDianZan = isDianZan

this.name = name

}

}

export function CreateImg(imgData) {

return new Img({

id: imgData.id,

src: imgData.src,

isDianZan: imgData.isDianZan,

name: imgData.name

})

}