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

1.multi-column多列布局實(shí)現(xiàn)瀑布流

先簡單的講下multi-column相關(guān)的部分屬性

column-count設(shè)置列數(shù)column-gap設(shè)置列與列之間的間距column-width設(shè)置每列的寬度

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

break-inside屬性值

auto 指定既不強(qiáng)制也不禁止元素內(nèi)的頁/列中斷。
avoid 指定避免元素內(nèi)的分頁符。
avoid-page 指定避免元素內(nèi)的分頁符。
avoid-column 指定避免元素內(nèi)的列中斷。
avoid-region 指定避免元素內(nèi)的區(qū)域中斷。

截取了部分，可自己填充

/* html文件 */
<!-- 使用multi-columns實(shí)現(xiàn)瀑布流 -->
<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">牽起你的左手護(hù)著你</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">牽起你的左手護(hù)著你</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">牽起你的左手護(hù)著你</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">牽起你的左手護(hù)著你</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">牽起你的左手護(hù)著你</span>
</div>
</div>
</div>