css实现瀑布流简易效果

css实现瀑布流简易效果

<div class="waterfall-container">
   <div class="waterfall-item" v-for="i in list"> 
		<div class="item" :style="{height:i+'px'}">
			@pky
		</div>
    </div>
</div>

export default {
  data(){
	  return{
		  list:[300,500,400,600,700,750,800,950,300,550,450,350,260,290,550,660]
	  }
  }
}

.waterfall-container {
    /*分几列*/
   -moz-column-count:3; /* Firefox */
   -webkit-column-count:3; /* Safari 和 Chrome */
   column-count:2;
  }

  .waterfall-item {
    /*不留白，不知道什么意思可以取消这个样式试*/
    break-inside: avoid;
	-moz-column-gap:40px; /* Firefox */
	-webkit-column-gap:40px; /* Safari 和 Chrome */
	column-gap:40px;
  }
.item{
	margin-bottom: 30px;
	background: goldenrod;
}

效果图

纯静态玩玩还行，实际开发然并卵…