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

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

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

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

父组件：

子组件： 

Vue.component('my-component-cascade-flow',{
		props: {
			pageWidth: { //
				type: String,
				default: "80%"
			},
			barNumber: {
				type: Number,
				default: 4,
				validator: function (value) {
					return 1

template: 

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;
		}

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