純css怎么實(shí)現(xiàn)瀑布流

這篇文章主要介紹了純css怎么實(shí)現(xiàn)瀑布流，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

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

　　column-count設(shè)置列數(shù)

　　column-gap設(shè)置列與列之間的間距

　　column-width設(shè)置每列的寬度

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

　　break-inside屬性值

　　auto指定既不強(qiáng)制也不禁止元素內(nèi)的頁(yè)/列中斷。

　　avoid指定避免元素內(nèi)的分頁(yè)符。

　　avoid-page指定避免元素內(nèi)的分頁(yè)符。

　　avoid-column指定避免元素內(nèi)的列中斷。

　　avoid-region指定避免元素內(nèi)的區(qū)域中斷。

　　截取了部分，可自己填充

　　/*html文件*/

　　<!--使用multi-columns實(shí)現(xiàn)瀑布流-->

　　<divid="root">

　　<divclass="item">

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

　　<divclass="userInfo">

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

　　<spanclass="username">牽起你的左手護(hù)著你</span>

　　</div>

　　</div>

　　<divclass="item">

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

　　<divclass="userInfo">

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

　　<spanclass="username">牽起你的左手護(hù)著你</span>

　　</div>

　　</div>

　　<divclass="item">

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

　　<divclass="userInfo">

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

　　<spanclass="username">牽起你的左手護(hù)著你</span>

　　</div>

　　</div>

　　<divclass="item">

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

　　<divclass="userInfo">

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

　　<spanclass="username">牽起你的左手護(hù)著你</span>

　　</div>

　　</div>

　　<divclass="item">

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

　　<divclass="userInfo">

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

　　<spanclass="username">牽起你的左手護(hù)著你</span>

　　</div>

　　</div>

　　</div>

　　/*css樣式*/

　　body{

　　background:#e5e5e5;

　　}

　　/*瀑布流最外層*/

　　#root{

　　margin:0auto;

　　width:1200px;

　　column-count:5;

　　column-width:240px;

　　column-gap:20px;

　　}

　　/*每一列圖片包含層*/

　　.item{

　　margin-bottom:10px;

　　/*防止多列布局，分頁(yè)媒體和多區(qū)域上下文中的意外中斷*/

　　break-inside:avoid;

　　background:#fff;

　　}

　　.item:hover{

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

　　}

　　/*圖片*/

　　.itemImg{

　　width:100%;

　　vertical-align:middle;

　　}

　　/*圖片下的信息包含層*/

　　.userInfo{

　　padding:5px10px;

　　}

　　.avatar{

　　vertical-align:middle;

　　width:30px;

　　height:30px;

　　border-radius:50%;

　　}

　　.username{

　　margin-left:5px;

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

　　}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“純css怎么實(shí)現(xiàn)瀑布流”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!