css实现页面瀑布流样式的方法
摘要：css实现页面瀑布流样式的方法两种方法：1，css3的样式 column-count 2，flex布局方式方法一：** column-count 方式，这种方式IE浏览器不支持(10以下)更适合手机端使用，缺点是：图片是先从上到下排列，再从左到右排列的**body{margin:0auto;width:500px;}.box{column-count:4;//显示的列数（几
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实现瀑布流布局的两种方法，通过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
如果你的问题还没有解决，可以加入交流群和群友一起讨论。如果想请站长喝杯咖啡，点击打赏按钮扫码赞赏~
版权声明：本站部分教程是由网络收集，然后整理编辑而成，版权归原作者所有，如果由此而造成的侵权，请与我们联系，审核属实后立即删除，谢谢！请与我们联系，审核属实后立即删除，谢谢！
发表评论