瀑布流的布局自我感覺還是很吸引人的,最近又看到實(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>
新聞熱點(diǎn)
疑難解答