纯css瀑布流布局示例详细讲解

这是我在做公司官网时候遇到的问题，UI设计图样式如下：
在这里插入图片描述

问题分析：

首先，看见这个UI设计图：它呈左右两列不规则分布，而且也能发现width宽度、heigth高度等都不相同。

思路分析：

毫无疑问，我们用简单的div布局+css做的话是可以达到这样的效果的，只是这样很low，不灵活，而且需要反复布局排版，代码量也不简单！
此时，这个用瀑布流的话会简单不少！

原理+实现：

瀑布流：又称瀑布流式布局，是比较流行的一种网站页面布局方式，能够提升用户的体验感。它是多行等宽元素排列，等宽不等高或者宽高都不相同，后面的元素依次添加到其后！根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。

主要知识点：
column-count：这是一个可以设置将div元素中的文本分成几列，默认值是：auto；

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

注意：IE9及更早 IE 版本浏览器不支持 column-count 属性。此时引入另一个知识点·column-gap，用来调整边距

html：

<div class="step6-waterfull">
 <div class="step6-waterfull-item">
   <img src="../../../assets/images/home/img_926.png" alt="">
 </div>
 <div class="step6-waterfull-item">
   <img src="../../../assets/images/home/img_927.png" alt="">
 </div>
 <div class="step6-waterfull-item">
   <img src="../../../assets/images/home/img_928.png" alt="">
 </div>
 <div class="step6-waterfull-item">
   <img src="../../../assets/images/home/img_922.png" alt="">
 </div>
 <div class="step6-waterfull-item">
   <img src="../../../assets/images/home/img_923.png" alt="">
 </div>
 <div class="step6-waterfull-item">
   <img src="../../../assets/images/home/img_924.png" alt="">
 </div>
 <div class="step6-waterfull-item">
   <img src="../../../assets/images/home/img_925.png" alt="">
 </div>
</div>

css:

.step6-waterfull {
    
    
  width: 100%;
  min-height: 500px;
  margin-top: 120px;
  display:inline-block;
  overflow: hidden; //控制宽度
  column-count:2; //列数
  -moz-column-count:2; /* Firefox */
  -webkit-column-count:2; /* Safari 和 Chrome */
  column-gap: 30px;/*  IE9以下浏览器版本兼容 */
  -moz-column-gap: 30px; 
  -webkit-column-gap: 30px;

  .step6-waterfull-item {
    
    
    text-align: right;
    margin-bottom: 16px;
  }
}

结果展示：

在这里插入图片描述
我这里用的是纯css做的，也可以用js或者插件实现！

补充知识点：

<div class="step6-waterfull">
  <div class="step6-waterfull-item">1</div>
  <div class="step6-waterfull-item">2</div>
  <div class="step6-waterfull-item">3</div>
  <div class="step6-waterfull-item">4</div>
  <div class="step6-waterfull-item">5</div>
  <div class="step6-waterfull-item">6</div>
  <div class="step6-waterfull-item">7</div>
  <div class="step6-waterfull-item">8</div>
  <div class="step6-waterfull-item">9</div>
  <div class="step6-waterfull-item">10</div>
  <div class="step6-waterfull-item">11</div>
</div>

效果图：
在这里插入图片描述
可以从图中看出，瀑布流的排布为从上到下，不是从从左到右这个。知道这点对于布局排版有帮助。