css属性实现瀑布流效果------淘宝错位布局的实现

目前很多页面可以看到列表错位排布的样式，这种样式如何实现？

这个布局的实现是使用了一些css3新增属性

多列布局

多列布局的父元素属性：

column-count:3【分成3列】

column-gap:10px【列之间的间距设为10px】

column-rule:1px solid red;【列与列中间设置分割线】

多列布局的子属性

break-inside:avoid；【用来避免子元素分开换列显示】

以下是代码主体部分

<ul>
        <li>
            <img src="../images/031301.png" alt="">
            <p>这段是对上面图片的描述</p>
        </li>
        <li>
            <img src="../images/1111.jpg" alt="">
            <p>这段是对上面图片的描述</p>
        </li>
        <li>
            <img src="../images/5.png" alt="">
            <p>这段是对上面图片的描述</p>
        </li>
        <li>
            <img src="../images/031301.png" alt="">
            <p>这段是对上面图片的描述</p>
        </li>
        <li>
            <img src="../images/1111.jpg" alt="">
            <p>这段是对上面图片的描述</p>
        </li>
        <li>
            <img src="../images/5.png" alt="">
            <p>这段是对上面图片的描述</p>
        </li>
        <li>
            <img src="../images/031301.png" alt="">
            <p>这段是对上面图片的描述</p>
        </li>
        <li>
            <img src="../images/1111.jpg" alt="">
            <p>这段是对上面图片的描述</p>
        </li>
        <li>
            <img src="../images/5.png" alt="">
            <p>这段是对上面图片的描述</p>
        </li>
    </ul>

以下是css样式

        ul {
            padding: .1rem;
            column-count: 2;
            column-gap: .2rem;
            background-color: #f6f6f6;
        }

        li {
            background-color: #fff;
            border: 1px solid #999;
            padding: .1rem;
            margin-bottom: 0.1rem;
            break-inside: avoid;
        }

        li img {
            width: 100%;
            margin-bottom: 0.1rem;

        }