Happy New Year!

flex布局实现瀑布流排版

网上有很多有关js(jq)实现瀑布流和有关瀑布流的插件很多,例如:插件(MasonryWookmark等等)。按照正常的逻辑思维,瀑布流的排版(item列表)一般都是 由左到右,上而下排序的结果,单纯的css实现这一点有些困难 ,下面分享一款由flex布局实现的瀑布流效果,虽然效果难以达到有些插件的效果,但也算是简单实用吧。如果您还对flex不是太了解,那您需要先了解一下flex布局。

实现效果图:

 

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

 

这样flex的简单瀑布流布局就可以了~

posted @ 2018-03-21 18:03  一只看夕阳的猫  阅读(5213)  评论(0编辑  收藏  举报
返回顶部小火箭
世界很公平,想要最好,就一定得付出!
x
博客主页