这篇文章主要介绍了纯css怎么实现瀑布流,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
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实现瀑布流-->
<divid="root">
<divclass="item">
<imgclass="itemImg"src="../images/1.jpeg"alt=""/>
<divclass="userInfo">
<imgclass="avatar"src="../images/gift.png"alt=""/>
<spanclass="username">牵起你的左手护着你</span>
</div>
</div>
<divclass="item">
<imgclass="itemImg"src="../images/2.jpg"alt=""/>
<divclass="userInfo">
<imgclass="avatar"src="../images/gift.png"alt=""/>
<spanclass="username">牵起你的左手护着你</span>
</div>
</div>
<divclass="item">
<imgclass="itemImg"src="../images/3.jpg"alt=""/>
<divclass="userInfo">
<imgclass="avatar"src="../images/gift.png"alt=""/>
<spanclass="username">牵起你的左手护着你</span>
</div>
</div>
<divclass="item">
<imgclass="itemImg"src="../images/4.jpg"alt=""/>
<divclass="userInfo">
<imgclass="avatar"src="../images/gift.png"alt=""/>
<spanclass="username">牵起你的左手护着你</span>
</div>
</div>
<divclass="item">
<imgclass="itemImg"src="../images/5.jpeg"alt=""/>
<divclass="userInfo">
<imgclass="avatar"src="../images/gift.png"alt=""/>
<spanclass="username">牵起你的左手护着你</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;
/*防止多列布局,分页媒体和多区域上下文中的意外中断*/
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);
}
感谢你能够认真阅读完这篇文章,希望小编分享的“纯css怎么实现瀑布流”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。