瀑布流布局

瀑布流布局

1、column-count 把div中的文本分为多少列
2、column-width 规定列宽
3、column-gap 规定列间隙
4、break-inside: avoid; 手机端瀑布流时候，会出现图片错乱，这个属性可避免元素内部断行并产生新列；

<style>
.waterfall{
    column-count: 3;
    column-gap: 0;
}
            
.item{
    box-sizing: border-box;
    break-inside: avoid;
    padding: 10px;
}
.item-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    height: auto;
    font-size: 20px;
    color: #686868;
    box-sizing: border-box;
    border: 1px solid #ccc;
}
</style>

<div class="waterfall">
   <div class="item">
      <div class="item-content">
         1.aaaaaaaaaaaaaaaaaaaaaaaaa
      </div>
   </div>
   <div class="item">
       <div class="item-content">
          2.bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
       </div>
   </div>
   <div class="item">
      <div class="item-content">
          3.ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
      </div>
   </div>
   <div class="item">
      <div class="item-content">
         4.ddddddddddddddddddddd
      </div>
   </div>
   <div class="item">
       <div class="item-content">
          5.eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
       </div>
   </div>
   <div class="item">
      <div class="item-content">
          6.ffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
      </div>
   </div>
   <div class="item">
      <div class="item-content">
         7.gggggggggggggggggggggggggggggggggggg
      </div>
   </div>
   <div class="item">
       <div class="item-content">
         9.hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
       </div>
   </div>
   <div class="item">
      <div class="item-content">
          9.iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
      </div>
   </div>
</div> 

效果图：