CSS3功能挺强大，觉得几行代码就可以搞定一个效果，这几天学了一个瀑布流效果，还挺喜欢的。
效果图：
一、原理图
在一个大盒子里，放置多个小盒子，小盒子的大小可以不一致，长短不一样，呈现一种瀑布流的效果。
二、body部分代码
<body> <div id="con">//建立的大盒子 //下面是内容区，就放一个盒子，其他的跟它是一样的 <div class="pic"> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1.jpg" width="188px" /> //插入图片 <h3><a href="#">野蛮生长</a></h3> //下面的标题 <p>人长大的标志：试着听从自己内心的声音，而不去在乎外面的声 音，等待和拖延是世界上最容易压垮一个人得东西。犹豫不决是你 最大的敌人。能看书就不要发呆，能碎觉就不要拖延，能吃饭就不 要饿着，能亲吻就不要说话，能找到自己想做的事情就不容易了， 青春得浪费在美好事物上。 </p> //文字内容 </div> //这个内容盒子可以多复制一些，只要计算好大盒子的宽度和小盒子的数量就好了 </div></body>
三、CSS3代码
*{padding:0;margin:0}/*给大盒子添加样式*/#con{width:980px;margin:60px auto;border-radius:25px;box-shadow:5px 5px 10px #000;padding:20px;/*下面代码是兼容各个浏览器的，并实现了四列，没两列之间间距为30px，*/-moz-column-count:4;-moz-column-gap:30px;-moz-column-rule:0px solid #ff0000; //火狐浏览器-webkit-column-count:4;-webkit-column-gap:30px;-webkit-column-rule:0px solid #ff0000; //Google chrome -o-column-count:4;-o-column-gap:30px;-o-column-rule:0px solid #ff0000; //Opera浏览器的}/*小盒子内容区的样式，display:inline-block：实现 效果*/#con .pic{width:188px; min-height:100px;box-shadow:2px 2px 6px #b5b5b5;padding:20px 15px;margin:10px;display:inline-block}#con h3{border-bottom:1px solid #ddd;line-height:30px;text-align:center;padding:5px 5px;}#con h3 a{text-decoration:none;color:#999;}#con p{font-size:12px;color:#666;line-height:20px;white-space:nowrap;overflow:hidden;/*很多文字，一行显示不下，用省略号显示的代码*/text-overflow:ellipsis;-o-text-overflow:ellipsis;
-moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; }话说，CSS3真心强大，以前看到瀑布流样式的图片，从来没想过会这么简单，几行代码就能轻松搞定。
Ps：亲测，火狐、搜狗浏览器都出现这个效果了。
作者：徐慕熹微
链接：https://www.jianshu.com/p/1fdaf541347d
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦