Css实现瀑布流布局

    <div class="waterfall">
       <div class="poster">
                  <div class="pic">
                      <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190920100012-1.jpg" alt="图片">
                  </div>
                  <div class="download">
                      <div class="appellation">新品海报</div>
                      <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190920101459-1.png" alt="下载">
                  </div>
              </div>
              <div class="poster">
                  <div class="pic">
                      <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190917164107-%E7%A6%BE%E7%B2%89%E9%82%80%E8%AF%B7h5%20-%20%E4%B8%93%E5%B1%9E%E6%B5%B7%E6%8A%A5%20-%20%E5%89%AF%E6%9C%AC.png"
                          alt="图片">
                  </div>
                  <div class="download">
                      <div class="appellation">新品海报</div>
                      <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190920101459-1.png" alt="下载">
                  </div>
              </div>
              <div class="poster">
                  <div class="pic">
                      <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190920101459-2.png" alt="图片">
                  </div>
                  <div class="download">
                      <div class="appellation">新品海报</div>
                      <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190920101459-1.png" alt="下载">
                  </div>
              </div>
          </div>

.waterfall {
    width: 1129px;
    margin: auto;
    text-align: center;
    column-count: 5; /*指定多少列*/
    column-width: 240px; /*指定列的宽度*/
    column-gap: 20px; /*规定列间的间隔*/
}
.poster {
    width: 266px;
    break-inside: avoid;/*避免进行分页行为*/
    background: #FFFFFF;
    border-radius: 5px;
    margin: 0 5px 19px;
    padding-bottom: 15px;
    box-sizing: border-box;
    box-shadow: 0px 0px 7px 0px rgba(183, 183, 183, 0.35);
}