CSS page layout waterfall flow layout

Time:2021-2-25

First of all, let’s take a look. What is waterfall?

Waterfall flow, also known as waterfall flow layout. It is a popular web page layout. The visual performance is uneven multi column layout. As the page scroll bar scrolls down, this layout will continue to load data blocks and attach to the current tail.

For example, the following website is waterfall layout:

CSS page layout waterfall flow layout

Using column count and column gap to realize waterfall layout (suitable for simple waterfall layout)

body {
  margin: 4px;
  font-family: Arial, Helvetica, sans-serif;
}

.masonry {
  column-count: 4;
  column-gap: 0;
}

.item {
  padding: 2px;
  position: relative;
  counter-increment: count;
}

.item img {
  display: block;
  width: 100%;
  height: auto;
}

.item::after {
  position: absolute;
  display: block;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  background-color: #000;
  color: #fff;
  content: counter(count);
}
<body>
    <div class="masonry">
        <div class="item">
            <img>
        </div>
        <div class="item">
            <img>
        </div>
        <div class="item">
            <img>
        </div>
        <div class="item">
            <img>
        </div>
        <div class="item">
            <img>
        </div>
        <div class="item">
            <img>
        </div>
        <div class="item">
            <img>
        </div>
        <div class="item">
            <img>
        </div>
        <div class="item">
            <img>
        </div>
        <div class="item">
            <img>
        </div>
        <div class="item">
            <img>
        </div>
        <div class="item">
            <img>
        </div>
    </div>
</body>

CSS page layout waterfall flow layout

deficiencies:

The pictures are arranged from top to bottom. If your web page is to display photos in reverse order of time, then we need to arrange the photos from left to right and wrap them. So although this method is simple at present, it is not suitable for many scenes.

Using flexbox to realize waterfall flow layout (not recommended)

Let’s use the HTML format just now, and change the CSS layout to flex layout.
For the layout of flex, please see another article:Flex layout
If we set the height of the flex container to 1000px fixed height, and the flex direction is set to colon mode, then when the height cannot hold all pictures, in the case of flex Wrap: wrap, the redundant pictures will wrap in the main axis direction. As shown in the figure below:

body {
  margin: 4px;
  font-family: Arial, Helvetica, sans-serif;
}

.masonry {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 1000px;


}

.item {
  position: relative;
  width: 25%;
  padding: 2px;
  counter-increment: count;
}

.item img {
  display: block;
  width: 100%;
  height: auto;
}

.item::after {
  position: absolute;
  display: block;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  background-color: #000;
  color: #fff;
  content: counter(count);
}

CSS page layout waterfall flow layout

However, we will find that the order of the pictures we show is also top-down.

However, in flex, we can use the order value to change the order of pictures, so as to meet the requirements of sorting from left to right. The code is as follows:

/**Because the column is the main axis, we set the order of the first, fifth and ninth photos first, and display them in the main axis, that is, the column first,
2, 6, 10 photos are shown in the second column, and so on. Here's a mathematical trick**/
.item:nth-child(4n+1) {
  order: 1;
}

.item:nth-child(4n+2) {
  order: 2;
}

.item:nth-child(4n+3) {
  order: 3;
}

.item:nth-child(4n+4) {
  order: 4;
}

CSS page layout waterfall flow layout

At this point, the web page is as shown in the figure.

deficiencies:

If we zoom the browser width:

CSS page layout waterfall flow layout

Because the height of flex’s capacity is fixed, the width of the container is reduced, and the height of the image in the container is changed because of the width (the image width is set to width: At this time, flex only needs to be divided into two columns to accommodate all the pictures. However, we only use mathematical methods to specify the order. The width of the cross axis becomes smaller, which disrupts the original layout. If we can, then the order of the pictures will be disrupted. The effect will be as shown in the figure above.

Waterfall flow implemented by third party plug-in (recommended)

Here, I recommend using a third-party plug-in to implement waterfall flow layout.

I use it heremasonryFor example

→→→→→Masonry website←←←←←

According to the official website:

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

Mason is a third-party layout plug-in, which makes you like a bricklayer, putting the elements in the space in the best position. It’s a little hard to understand. Let’s go straight to the code.

<script></script>
<script></script>

Here we introduce jQuery and masony plug-ins in CDN mode.

Here is my CSS code

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.grid-item {
  position: relative;
  width: 25%;
  border: 2px solid hsla(0, 0%, 0%, 0.5);
  box-sizing: border-box;
  counter-increment: count;
}


.grid-item img {
  display: block;
  height: auto;
  width: 100%;
}


.grid-item::after {
  position: absolute;
  display: block;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  background-color: #000;
  color: #fff;
  content: counter(count);
}
<body>
  <div class="grid">
    <! -- first line -- >
    <div class="grid-item">
      <img>
    </div>
    <div class="grid-item">
      <img>
    </div>
    <div class=" grid-item">
      <img>
    </div>
    <div class="grid-item">
      <img>
    </div>
    <! -- second line -- >
    <div class="grid-item">
      <img>
    </div>
    <div class="grid-item">
      <img>
    </div>
    <div class="grid-item">
      <img>
    </div>
    <div class="grid-item">
      <img>
    </div>
    <! -- third line -- >
    <div class="grid-item">
      <img>
    </div>
    <div class="grid-item">
      <img>
    </div>

    <div class="grid-item ">
      <img>
    </div>
    <div class="grid-item">
      <img>
    </div>
    <div class="grid-item">
      <img>
    </div>
    <div class="grid-item">
      <img>
    </div>

  </div>
</body>

I set the width of each photo to 25%. That is, there will be four photos in each row. Next is the JS code

var $grid = $('.grid').masonry({
  itemSelector: '.grid-item', 
  Percentposition: true, // use the percentage width of the responsive layout
  Horizontalorder: true, // layout the project to keep the horizontal order from left to right. This condition is defined. Photos are generally arranged from left to right, but it is not absolute.
  Originleft: true, // set the layout mode from left to right. This item is the default value and can not be filled in. If you set the value to false, it will be sorted from right to left
  Origintop: true, // set the layout mode from top to bottom. This item is the default value and can not be filled in. If you set the value to false, it will be sorted from bottom to top
  Transition duration: '0.8s' // the transition duration when changing position or appearance. The default is 0.4s
  resize:true , // the size and position of elements are automatically adjusted when the window is resized. It is not recommended to close this option
  Initlayout: true, // the default value is true. The layout is enabled during initialization. If it is set to disable the layout during initialization, you can use methods or add events before the initial layout. After executing custom methods, you can use the$ grid.masonry () method to initialize
})

//If I initlayout: false, I will execute this method before initializing the layout, and then call the $('. Grid'). Masonry() method for initialization. The following method is just an example
$grid.masonry( 'on', 'layoutComplete', function() {
  console.log('layout is complete');
});
//If initlayout: true, this method is not required
$grid.masonry();

/**The configuration items of masonry are as follows. You can go to the English official website by yourself instead of making more introduction.
- Recommended 
- itemSelector 
- columnWidth 
- Layout
- Element sizing 
- gutter
- horizontalOrder 
- percentPosition
- stamp 
- fitWidth
- originLeft 
- originTop
- Setup 
- containerStyle 
- transitionDuration 
- stagger 
- resize 
- initLayout
**/

After setting, I get the layout as shown in the figure below. Because I set horizontalorder: true, the layout of the picture will be arranged from left to right as far as possible. And because I set the width of the image as a percentage, whether it is to reduce or enlarge the element, a line will present four images.

CSS page layout waterfall flow layout

In addition, we can also use a fixed pixel width to set the image to prevent image deformation. We changed the width of the image container from 25% to 200px

 .grid-item {
   position: relative;
   width: 200px;
   border: 2px solid hsla(0, 0%, 0%, 0.5);
   box-sizing: border-box;
   counter-increment: count;
}

Remove the percentage position: true in the masonry configuration item in JS code. At this time, we get the layout effect as shown in the figure below. We can find that the width of the photo is fixed at 200px, and it takes up one line as much as possible. If it can’t, it will wrap.

CSS page layout waterfall flow layout

When we reduce the width of the browser, the photo will adapt to the width layout. As shown in the figure below:
CSS page layout waterfall flow layout

Here, we perfectly realized the display of waterfall flow layout. However, this plug-in should pay attention to the compatibility of the browser. I didn’t use it in Safari, but Chrome has no problem.

There are similar plug-insisotopeAnd so on, I don’t want to talk about it any more. Masonry also has a variety of layouts. You can go to the official website to see if you are interested.