search

Home  >  Article  >  Web Front-end  >  How to implement waterfall flow in CSS? Two ways to introduce

How to implement waterfall flow in CSS? Two ways to introduce

青灯夜游
青灯夜游forward
2021-09-26 10:58:144922browse

How to implement waterfall flow with CSS? The following article will introduce to you two ways to use CSS to implement waterfall flow. I hope it will be helpful to you!

How to implement waterfall flow in CSS? Two ways to introduce

Waterfall flow, also known as waterfall flow layout, is a popular website page layout method. It is often used when displaying multiple pictures on mobile phones. That is, multiple rows of equal-width elements are arranged, and subsequent elements are added to them in sequence, with equal width and unequal height. They are scaled according to the original proportion of the picture until the width reaches our requirements, and then placed in the specified position according to the rules.

So what are the implementation methods of waterfall flow layout?

column Multi-line layout to implement waterfall flow

column Implementing waterfall flow mainly relies on two attributes.

column-count attribute controls how many columns the screen is divided into.

column-gap attribute controls the distance between columns. 

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瀑布流布局-column</title>
  <style>
    .box {
          margin: 10px;
          column-count: 3;
          column-gap: 10px;
      }
      .item {
          margin-bottom: 10px;
      }
      .item img{
          width: 100%;
          height:100%;
      }
  </style>
</head>
<body>
  <div class="box">
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
  </div>
</body>
</html>

How to implement waterfall flow in CSS? Two ways to introduce

flex Flexible layout to achieve waterfall flow

##flex To implement waterfall flow, you need to set the outermost element to display: flex, use elastic layout

flex-flow:column wrap to arrange it vertically and Line wrap

Set

height: 100vh The height to fill the screen, or it can be set to the height in units of px to accommodate child elements.

The width of each column can be set with the

calc function, that is, width: calc(100%/3 - 20px). Divide it into equal-width 3 columns and subtract the margin distance twice on the left and right. 

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
        display: flex;  
        flex-flow: column wrap;
        height: 100vh;
      }
      .item {
        margin: 10px;
        width: calc(100%/3 - 20px);
      }
      .item img{
        width: 100%;
        height:100%;
      }
  </style>
</head>
<body>
  <div class="box">
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
  </div>
</body>
</html>
The display effect is as follows

How to implement waterfall flow in CSS? Two ways to introduce

Case code

Waterfall flow implementation code: https:/ /gitee.com/yunxii/css-demo/tree/master/waterfall

Original address: https://juejin.cn/post/7011333433318178846

Author: tangxd3

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of How to implement waterfall flow in CSS? Two ways to introduce. For more information, please follow other related articles on the PHP Chinese website!

css count display margin column flex https gitee
Statement：
This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete
Previous article：Learn more about :is() and :where() in CSS to make your style code more concise!Next article：Learn more about :is() and :where() in CSS to make your style code more concise!

Related articles

See more