css 实现瀑布流布局

效果：

 

 

代码：

<div class="container">
  <div class="item" style="height:50px"></div>
  <div class="item" style="height:20px"></div>
  <div class="item" style="height:30px"></div>
  <div class="item" style="height:60px"></div>
  <div class="item" style="height:40px"></div>
  <div class="item" style="height:50px"></div>
  <div class="item" style="height:70px"></div>
</div>

<style type="text/css">
.container {
  column-count: 5;
  column-gap: 10px;
}

.item {
  break-inside: avoid;
  box-sizing: border-box;
  padding: 10px;
  border:1px solid #aaa;
  margin-bottom: 10px;
}

</style>