瀑布流css实现

父元素设置

.container{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */
column-gap:30px;
}

flex布局实现
父元素：display:flex;横向排列
flex-flow:column wrap 使其换行
设置 height: 100vh 填充屏幕的高度，来容纳子元素。
每一列的宽度可用 calc 函数来设置，
即 width: calc(100%/3 - 20px)。分成等宽的 3 列减掉左右两遍的 margin 距离

        .container {
          display: flex;  
          flex-flow:column wrap;
          height: 100vh;
        }
        .item {
            margin: 10px;
            width: calc(100%/3 - 20px);
        }
        .item img{
            width: 100%;
            height:100%;
        }