[css] 实现瀑布流

multi-column多列布局实现瀑布流
先简单的讲下multi-column相关的部分属性

• column-count设置列数
• column-gap设置列与列之间的间距
• column-width设置每列的宽度

还要结合在子容器中设置break-inside防止多列布局，分页媒体和多区域上下文中的意外中断

break-inside属性值

  auto  指定既不强制也不禁止元素内的页/列中断。

  avoid  指定避免元素内的分页符。

  avoid-page  指定避免元素内的分页符。

  avoid-column 指定避免元素内的列中断。

  avoid-region  指定避免元素内的区域中断。

父
     column-count: 5; //  5列

     column-width: 240px; // 每一列宽度

     column-gap: 20px; // 列间距
     
子
    /* 防止多列布局，分页媒体和多区域上下文中的意外中断 */

     break-inside: avoid;


/* html文件 */

<!-- 使用multi-columns实现瀑布流 -->

<div id="root">

    <div class="item">

        <img class="itemImg" src="../images/1.jpeg" alt=""/>

        <div class="userInfo">

            <img class="avatar" src="../images/gift.png" alt=""/>

            <span class="username">牵起你的左手护着你</span>

        </div>

    </div>

    <div class="item">

        <img class="itemImg" src="../images/2.jpg" alt=""/>

        <div class="userInfo">

            <img class="avatar" src="../images/gift.png" alt=""/>

            <span class="username">牵起你的左手护着你</span>

        </div>

    </div>

    <div class="item">

        <img class="itemImg" src="../images/3.jpg" alt=""/>

        <div class="userInfo">

            <img class="avatar" src="../images/gift.png" alt=""/>

            <span class="username">牵起你的左手护着你</span>

        </div>

    </div>

    <div class="item">

        <img class="itemImg" src="../images/4.jpg" alt=""/>

        <div class="userInfo">

            <img class="avatar" src="../images/gift.png" alt=""/>

            <span class="username">牵起你的左手护着你</span>

        </div>

    </div>

    <div class="item">

        <img class="itemImg" src="../images/5.jpeg" alt=""/>

        <div class="userInfo">

            <img class="avatar" src="../images/gift.png" alt=""/>

            <span class="username">牵起你的左手护着你</span>

        </div>

    </div>

</div>

/* css样式 */

body {

    background: #e5e5e5;

}

/* 瀑布流最外层 */

#root {

     margin: 0 auto;

     width: 1200px;

     column-count: 5; //  5列

     column-width: 240px; // 每一列宽度

     column-gap: 20px; // 列间距

}

/* 每一列图片包含层 */

.item {

     margin-bottom: 10px;

     /* 防止多列布局，分页媒体和多区域上下文中的意外中断 */

     break-inside: avoid;

     background: #fff;

}

.item:hover {

     box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);

}

/* 图片 */

.itemImg {

     width: 100%;

     vertical-align: middle;

}

/* 图片下的信息包含层 */

.userInfo {

     padding: 5px 10px;

}

.avatar {

     vertical-align: middle;

     width: 30px;

     height: 30px;

     border-radius: 50%;

}

.username {

     margin-left: 5px;

     text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);

}

---

​​纯css如何实现瀑布流？css实现瀑布流的两种方式​​