瀑布流的布局自我感覺還是很吸引人的，最近又看到實現瀑布流這個做法，在這里記錄下，特別的，感覺flex布局實現瀑布流還是有點懵的樣子，不過現在就可以明白它的原理了

1.multi-column多列布局實現瀑布流

先簡單的講下multi-column相關的部分屬性

column-count設置列數column-gap設置列與列之間的間距column-width設置每列的寬度

還要結合在子容器中設置break-inside防止多列布局，分頁媒體和多區域上下文中的意外中斷

break-inside屬性值

auto 指定既不強制也不禁止元素內的頁/列中斷。
avoid 指定避免元素內的分頁符。
avoid-page 指定避免元素內的分頁符。
avoid-column 指定避免元素內的列中斷。
avoid-region 指定避免元素內的區域中斷。

截取了部分，可自己填充

/* 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>