CSS3 method to implement waterfall flow layout

This time I will bring you How to implement waterfall flow layout with CSS3, what are the notes for CSS3 to implement waterfall flow layout, the following is a practical case, let’s take a look.

In the past, js was required to use waterfall flow. Now with css3, it can be easily implemented.

Mastery points:

1. column-count divides the text in p into several columns

2. column-width specifies the column width

3. column-gap specifies the column gap

4. break-inside: avoid; avoids breaking lines inside elements and generating new columns

Note: Internet Explorer 9 and earlier IE The version browser does not support the column-count attribute.

column-count attribute specifies the number of columns by which elements should be separated:

p
{
-moz-column-count:3;  /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

column-gap attribute specifies the gap between columns:

p
{
-moz-column-gap:40px;  /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}

column-rule attribute sets the column Width, style and color rules between:

p
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}

Example:

nbsp;html>


    <meta>
    <title>CSS3瀑布流</title>
    <style>
    /*大层*/
    .container{width:80%;margin: 0 auto;}
    /*瀑布流层*/
    .waterfall{
        -moz-column-count:4; /* Firefox */
        -webkit-column-count:4; /* Safari 和 Chrome */
        column-count:4;
        -moz-column-gap: 1em;
      -webkit-column-gap: 1em;
      column-gap: 1em;
    }
    /*一个内容层*/
    .item{
      padding: 1em;
      margin: 0 0 1em 0;
      -moz-page-break-inside: avoid;
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
     border: 1px solid #000;
    }
    .item img{
        width: 100%;
        margin-bottom:10px;
    }
    </style>


    <p>
        </p><p>
            </p><p>
                <img  src="/static/imghwm/default1.png" data-src="https://imgsa.baidu.com/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=f3d4063328738bd4d02cba63c0e2ecb3/a2cc7cd98d1001e910616de1be0e7bec55e797fa.jpg" class="lazy" alt="CSS3 method to implement waterfall flow layout" >
                </p><p>1 convallis timestamp</p>
           
            <p>
                <img  src="/static/imghwm/default1.png" data-src="https://imgsa.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=03948ea9b4315c60579863bdecd8a076/8326cffc1e178a825a6b5d1cfe03738da977e833.jpg" class="lazy" alt="CSS3 method to implement waterfall flow layout" >
                </p><p>2 convallis timestamp 2 Donec a fermentum nisi. </p>
           
            <p>
                <img  src="/static/imghwm/default1.png" data-src="https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=3d645bf2d0ca7bcb6976cf7ddf600006/6d81800a19d8bc3efe5f64fb858ba61ea8d345af.jpg" class="lazy" alt="CSS3 method to implement waterfall flow layout" >
                </p><p>3 Nullam eget lectus augue. Donec eu sem sit amet ligula 
        faucibus suscipit. Suspendisse rutrum turpis quis nunc 
        convallis quis aliquam mauris suscipit.</p>
           
            <p>
                <img  src="/static/imghwm/default1.png" data-src="https://imgsa.baidu.com/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=fbc3501b0a087bf469e15fbb93ba3c49/bf096b63f6246b60ea65dd24e3f81a4c510fa273.jpg" class="lazy" alt="CSS3 method to implement waterfall flow layout" >
                </p><p> 4 Donec a fermentum nisi. Integer dolor est, commodo ut 
        sagittis vitae, egestas at augue. </p>
           
  <p>
                <img  src="/static/imghwm/default1.png" data-src="https://imgsa.baidu.com/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=9fe1d71697ef76c6c4dff379fc7f969f/b03533fa828ba61ed2efcd184634970a304e5987.jpg" class="lazy" alt="CSS3 method to implement waterfall flow layout" >
                </p><p> 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
           
        
    

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

CSS3 to create a large striped background

css3 text gradient animation

CSS3 dynamic prompt effect when the mouse moves into the picture

The above is the detailed content of CSS3 method to implement waterfall flow layout. For more information, please follow other related articles on the PHP Chinese website!