使用vue封装的一个瀑布流图片的组件

这里我制作的瀑布留布局图片的思路是给每列图片组一个float:left。

组件可以自己定义瀑布有几列，总宽多少。

先看看效果图（定义的4列，宽度为父元素的80%）：

父组件：

<my-component-cascade-flow :page-width="width" :bar-number="num" :img-data="imgData"></my-component-cascade-flow>

子组件： 

Vue.component('my-component-cascade-flow',{ props: { pageWidth: { // type: String, default: "80%" }, barNumber: { type: Number, default: 4, validator: function (value) { return 1<value && value<11; } }, imgData: { //格式[{id:0, src: "url"}] type: Array, required: true } }, template: '#cascadeFlow', data(){ return { barWidth: 0, ownBarNumber: 0 //计算后得到的列的数量 } }, mounted(){ var _this = this; _this.setBarWidth(); }, methods: { setBarWidth(){ var _this = this; var widthProp = this.barNumber; _this.barWidth = 100/widthProp + "%"; } } })

template: 

<div class="cascade-page" :style="'width: '+pageWidth+';'"> <div class="cascade-bar" :style="'width:'+barWidth+';'" v-for="(val,i) in barNumber"> <div class="cascade-bar-content"> <div class="img-block" v-for="(item,index) in imgData" v-if="index