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实现瀑布流布局的两种方法,通过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
如果你的问题还没有解决,可以加入交流群和群友一起讨论。如果想请站长喝杯咖啡,点击打赏按钮扫码赞赏~
发表评论