css3 实现瀑布流

如何实现以上效果

css3 完全搞定：

一、

<style>
.func-list-detail ul {
  width:1100px;
  margin:0 auto;
  column-count:4;
  column-gap: 50px;
}
.func-list-detail li {
  break-inside: avoid;
}
</style>
<div class="func-list-detail">
  <ul>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <li>内容4</li>
    <li>内容5</li>
  </ul>
</div>

上面可以实现简单样式的瀑布流，但是要实现上面ui图是要有阴影的，在用此方法后，瀑布内元素边框阴影受到影响，不完全显示。于是换了一种写法

二、这是参考了蘑菇街网站的写法，就是

直接分成几列

.func-list-detail {
  width: 1100px;
  margin: 0 auto;
}
.func-list-detail:after {
  display: block;
  content: '';
  clear: both;
}
.func-list-detail .col-item {
  float: left;
  margin-right: 50px;
  float: left;
  margin-right: 50px;
  width: -webkit-calc((100% - 150px) / 4);
  width:    -moz-calc((100% - 150px) / 4);
  width:         calc((100% - 150px) / 4);
}
.func-list-detail .col-item:last-child{
  margin-right: 0px;
}
.func-list-detail li {
  padding: 20px;
  margin-bottom: 40px;
  text-align: left;
  border-radius: 5px;
  box-shadow: 2px 2px 16px #d3d3d3, -2px -2px 16px #d3d3d3;
  background: #fff;
}

这个是有点简单粗暴的~