Detailed explanation of the pure CSS waterfall flow layout example

This is a problem I encountered when I was working on the company's official website. The UI design drawing style is as follows:
Insert picture description here

problem analysis:

First of all, see this UI design diagram: it is irregularly distributed in the left and right columns, and you can also find that the width, heigth, etc. are different.

Thinking analysis:

There is no doubt that we can achieve this effect if we use a simple div layout + css, but it is very low, inflexible, and requires repeated layout and typesetting, and the amount of code is not simple!
At this time, 瀑布流it will be much simpler to use !

Principle + Realization:

Waterfall: Also known as waterfall layout, it is a popular way of website page layout, which can enhance the user experience. It is a multi-line arrangement of elements with equal width, equal width and unequal height or different width and height, and the following elements are added to it in turn! Scale according to the original ratio of the picture until the width meets our requirements, and place them in the specified position according to the rules.

Main knowledge points:
Column-count: This is a setting that can be set to divide the text in the div element into several columns, the default value is: auto;

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

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

注意: IE9 and earlier IE browsers do not support the column-count attribute. At this time, another knowledge point is introduced column-gapto adjust the margin

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

Result display:

Insert picture description here
What I use here is pure css, or it can be implemented with js or plug-ins!

Supplementary knowledge points:

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

Effect picture: It
Insert picture description here
can be seen from the picture that the arrangement of the waterfall flow is from top to bottom, not from left to right. Knowing this is helpful for layout and typesetting.