使用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%barNumber==i" :key="item.id">
				<img :src="item.src" width="100%" />
			</div>
		</div>
	</div>
</div>

css:

        *{
			border: 0;
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.container{
			width: 100%;
		}
		.cascade-page{
			margin: 0 auto;
			background-color: #ddd;
			overflow: hidden;
		}
		.cascade-bar{
			padding: 0px 5px;
			padding-bottom: 0px;
			float: left;
		}
		.cascade-bar-content{
			width: 100%;
		}
		.img-block{
			width: 100%;
			margin: 5px 0px;
		}

需要完整的去我的资源里面下载吧，这发布资源后还在审核中，链接帖不上了。