css实现页面瀑布流样式的方法

更新时间:3个月前 作者:CMS开发网 来源:本站 点赞数:0人 阅读数:38次 0 条评论
摘要:css实现页面瀑布流样式的方法两种方法:1,css3的样式 column-count 2,flex布局方式方法一:** column-count 方式,这种方式IE浏览器不支持(10以下)更适合手机端使用,缺点是:图片是先从上到下排列,再从左到右排列的**body{margin:0auto;width:500px;}.box{column-count:4;//显示的列数(几
css实现页面瀑布流样式的方法

css实现页面瀑布流样式的方法

两种方法:1,css3的样式 column-count 2,flex布局方式

方法一

column-count 方式,这种方式IE浏览器不支持(10以下)更适合手机端使用,

缺点是:图片是先从上到下排列,再从左到右排列的

body {
margin:0 auto;
width:500px;
}
.box{
column-count: 4;//显示的列数(几列显示)
column-gap: 10px;//每列之间的间隔距离
}
//---------------
<body>
<div class="box">
//这里可以是文字  或者图片 样式自己设置
<img src="xx.png">
<img src="xx.png">
<img src="xx.png">
</div>
</body>

方法二

flex布局方式,使用order可以做到先从左到右,再从上到下显示

缺点:需要预先设定flex容器的高度,且调整页面大小时会出现一些间距过大等适配的问题

body {
margin:0 auto;
width: 720px;
}
.box{
display: flex;//flex布局
flex-flow: column wrap;//这里进行竖排方式  注意:这里不能用横排否则图片大小不一致情况下无法错位排列
height: 1000px;//设置高度使图片进行折行排列
}
img {
display: block;
width: 25%;//设置25%是想让图片排列4排这里和高度值做个联动
height: auto;
padding: 2px;
}
/*使用order设置图片的排列顺序,从左到右,再从上到下*/ //主要是这里起到作用否则还是上下顺序
img:nth-child(4n+1) {order: 1;}
img:nth-child(4n+2) {order: 2;}
img:nth-child(4n+3) {order: 3;}
img:nth-child(4n+4) {order: 4;}
//---------------
<body>
<div class="box">
//这里可以是文字  或者图片 样式自己设置
<img src="xx.png">
<img src="xx.png">
<img src="xx.png">
</div>
</body>

效果展示

css实现页面瀑布流样式的方法

瀑布流的布局感觉还是蛮不错的,所以本篇文章就给大家来分享一下css实现瀑布流布局的两种方法,通过multi-column多列布局实现瀑布流和flex布局实现瀑布流。

1.multi-column多列布局实现瀑布流

先简单的讲下multi-column相关的部分属性

column-count设置列数

column-gap设置列与列之间的间距

column-width设置每列的宽度

还要结合在子容器中设置break-inside防止多列布局,分页媒体和多区域上下文中的意外中断

break-inside属性值

auto 指定既不强制也不禁止元素内的页/列中断。

avoid 指定避免元素内的分页符。

avoid-page 指定避免元素内的分页符。

avoid-column 指定避免元素内的列中断。

avoid-region 指定避免元素内的区域中断。

THE END

如果你的问题还没有解决,可以加入交流群和群友一起讨论。如果想请站长喝杯咖啡,点击打赏按钮扫码赞赏~

版权声明:本站部分教程是由网络收集,然后整理编辑而成,版权归原作者所有,如果由此而造成的侵权,请与我们联系,审核属实后立即删除,谢谢!请与我们联系,审核属实后立即删除,谢谢!

发表评论

发表评论
评论列表 (评论通过审核后才会显示)
暂无评论