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

需要完整的去我的資源裏面下載吧，這發佈資源後還在審覈中，鏈接帖不上了。