flex布局实现瀑布流排版

Posted 2020-10-28 一只看夕阳的猫

网上有很多有关js（jq）实现瀑布流和有关瀑布流的插件很多，例如：插件（Masonry，Wookmark等等）。按照正常的逻辑思维，瀑布流的排版（item列表）一般都是 由左到右，上而下排序的结果，单纯的css实现这一点有些困难 ，下面分享一款由css局实现的瀑布流效果，虽然效果难以达到有些插件的效果，但也算是简单实用吧。

实现效果图：

 

html结构：

<div class="waterfall">
   <div class="item">
      <div class="item-content">
         三月到大理赏樱花不远不近
      </div>
   </div>
   <div class="item">
       <div class="item-content">
          三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光
       </div>
   </div>
   <div class="item">
      <div class="item-content">
          三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆
      </div>
   </div>
</div> 

关于item列表，我添加的比较少，您多添加几个就可以了......

 

css样式：

.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;
}

 

这样css的简单瀑布流布局就可以了～