css实现瀑布流的方法有哪些
这篇文章主要介绍了css实现瀑布流的方法有哪些,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
10年积累的成都网站建设、网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有色尼免费网站建设让你可以放心的选择与我们合作。
1.multi-column多列布局实现瀑布流
先简单的讲下multi-column相关的部分属性
column-count设置列数
column-gap设置列与列之间的间距
column-width设置每列的宽度
还要结合在子容器中设置break-inside防止多列布局,分页媒体和多区域上下文中的意外中断
break-inside属性值 auto 指定既不强制也不禁止元素内的页/列中断。 avoid 指定避免元素内的分页符。 avoid-page 指定避免元素内的分页符。 avoid-column 指定避免元素内的列中断。 avoid-region 指定避免元素内的区域中断。
截取了部分,可自己填充
/* html文件 */牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你
/* css样式 */ body { background: #e5e5e5; } /* 瀑布流最外层 */ #root { margin: 0 auto; width: 1200px; column-count: 5; column-width: 240px; column-gap: 20px; } /* 每一列图片包含层 */ .item { margin-bottom: 10px; /* 防止多列布局,分页媒体和多区域上下文中的意外中断 */ break-inside: avoid; background: #fff; } .item:hover { box-shadow: 2px 2px 2px rgba(0, 0, 0, .5); } /* 图片 */ .itemImg { width: 100%; vertical-align: middle; } /* 图片下的信息包含层 */ .userInfo { padding: 5px 10px; } .avatar { vertical-align: middle; width: 30px; height: 30px; border-radius: 50%; } .username { margin-left: 5px; text-shadow: 2px 2px 2px rgba(0, 0, 0, .3); }
(瀑布流布局效果图1)
2.flex布局实现瀑布流
将外层设置为row布局,然后再设置一个容器并设置为column布局,它是将列作为一个整体,然后在对列进行划分,在列里进行宽固定来实现的
/* html文件(只截取两列布局)*/牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你
/* css文件 */ body{ background: #e5e5e5; } #root{ display: flex; flex-direction: row; margin: 0 auto; width: 1200px; } .itemContainer{ margin-right: 10px; flex-direction: column; width: 240px; } .item{ margin-bottom: 10px; background: #fff; } .itemImg{ width: 100%; } .userInfo { padding: 5px 10px; } .avatar { vertical-align: middle; width: 30px; height: 30px; border-radius: 50%; } .username { margin-left: 5px; text-shadow: 2px 2px 2px rgba(0, 0, 0, .3); }
(瀑布流布局效果图2)
实践后发现,纯css实现的瀑布流只能是一列一列的排布,所以还是得用js来实现瀑布流布局更符合我们常见的瀑布流
感谢你能够认真阅读完这篇文章,希望小编分享css实现瀑布流的方法有哪些内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!
网站名称:css实现瀑布流的方法有哪些
转载来源:http://scyanting.com/article/gehcop.html