How to realize Waterfall flow with CSS

Editor to share with you how CSS to achieve waterfall flow, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Waterfall flow, also known as waterfall flow layout, is a more popular way of website page layout. It is often used for multi-picture display on the mobile side. That is, multiple lines of equal width elements are arranged, and the following elements are added in turn, equal width and unequal height, scale according to the original scale of the picture until the width meets our requirements, and then put it into the specified position in accordance with the rules.

So what are the ways to implement waterfall flow layout?

Column multi-line layout to realize waterfall flow

The implementation of waterfall flow by column mainly depends on two properties.

The column-count property, which controls how many columns the screen is divided into.

The column-gap property, which controls the distance between columns.

Waterfall flow layout-column .box {margin: 10px; column-count: 3; column-gap: 10px;} .item {margin-bottom: 10px;} .item img {width: 100%; height:100%;}

Implementation of Waterfall flow with flex Elastic layout

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

Flex-flow:column wrap arranges it longitudinally and wraps lines

Set the height of the height: 100vh fill screen, or you can set it to the height of the unit px to accommodate child elements.

The width of each column can be set with the calc function, that is, width: calc (100% width 3-20px). Divide it into three equal-width columns and subtract the margin distance from left to right twice.

Waterfall flow layout-flex .box {display: flex; flex-flow: column wrap; height: 100vh;} .item {margin: 10px; width: calc (100% width 3-20px);} .item img {width: 100%; height:100%;}

The effect of the display is as follows

The above is all the content of the article "how to achieve Waterfall flow in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!