瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。
为什么使用瀑布流
瀑布流布局在我们现在的前端页面中经常会用的到,它可以有效的降低页面的复杂度,节省很多的空间,对于整个页面不需要太多的操作,只需要下拉就可以浏览用户需要看到的数据;并且,在当前这个APP至上的时代,瀑布流可以提供很好的用户体验,通过结合下拉刷新,上拉加载进行数据的懒加载等操作,对于用户的体验感来说是接近于满分的!
瀑布流的特点
其实瀑布流的特点就是参差不齐的排列方式,以及流式布局的扩展性,可以通过界面展示给用户多条数据,并且让用户可以有向下浏览的冲动。
瀑布流的代码实现
实现思路
1 2
| column-count:指定列数 column-gap: 设置列之间的间距
|
实现代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
| <div class="container"> <div class="item"> <img src="https://z3.ax1x.com/2021/05/30/2ZPyjO.jpg" alt="dog"> <h2>毒鸡汤</h2> <p> 现在人和人之间的矛盾,主要是来源于有那么一拨人,惯于用圣人的标准衡量别人,用贱人的标准要求自己。现在人和人之间的矛盾,主要是来源于有那么一拨人,惯于用圣人的标准衡量别人,用贱人的标准要求自己。现在人和人之间的矛盾,主要是来源于有那么一拨人,惯于用圣人的标准衡量别人,用贱人的标准要求自己。现在人和人之间的矛盾,主要是来源于有那么一拨人,惯于用圣人的标准衡量别人,用贱人的标准要求自己。 </p> </div> <div class="item"> <img src="https://z3.ax1x.com/2021/05/30/2ZPyjO.jpg" alt="dog"> <h2>毒鸡汤</h2> <p> 钱是买不到快乐和开心的,但是当你有钱之后,就会有人想尽办法的让你开心,这就是现实。钱是买不到快乐和开心的,但是当你有钱之后,就会有人想尽办法的让你开心,这就是现实。 </p> </div> <div class="item"> <img src="https://z3.ax1x.com/2021/05/30/2ZPyjO.jpg" alt="dog"> <h2>毒鸡汤</h2> <p> 白雪公主因为漂亮,所以被王后嫉妒;因为漂亮,所以被猎人放走;因为漂亮,所以被小矮人收留;因为漂亮,所以被王子亲醒;所以,你明白了吗?善良没用,你得漂亮。 </p> </div> <div class="item"> <img src="https://z3.ax1x.com/2021/05/30/2ZPyjO.jpg" alt="dog"> <h2>毒鸡汤</h2> <p> 生活这几年教会我最大的道理的就是,不要跟生活正面刚。吃不下就不吃,睡不着就不睡,错过了就不要追,得不到就等着,死不了就撑着。 生活这几年教会我最大的道理的就是,不要跟生活正面刚。吃不下就不吃,睡不着就不睡,错过了就不要追,得不到就等着,死不了就撑着。 </p> </div> <div class="item"> <img src="https://z3.ax1x.com/2021/05/30/2ZPyjO.jpg" alt="dog"> <h2>毒鸡汤</h2> <p> 谈恋爱还没几个月就想过一辈子,交个朋友稍微对你好点就想来往一生,难怪你的怨气那么重、悲伤那么多,这都是天真的代价。 </p> </div> <div class="item"> <img src="https://z3.ax1x.com/2021/05/30/2ZPyjO.jpg" alt="dog"> <h2>毒鸡汤</h2> <p> 生活这几年教会我最大的道理的就是,不要跟生活正面刚。吃不下就不吃,睡不着就不睡,错过了就不要追,得不到就等着,死不了就撑着。 </p> </div> <div class="item"> <img src="https://z3.ax1x.com/2021/05/30/2ZPyjO.jpg" alt="dog"> <h2>毒鸡汤</h2> <p> 你从80楼往下看,全是美景,但你从2楼往下看,全是垃圾,人若没有高度,看到的全是问题,人若没有格局,看到的全是鸡毛蒜皮。 </p> </div> <div class="item"> <img src="https://z3.ax1x.com/2021/05/30/2ZPyjO.jpg" alt="dog"> <h2>毒鸡汤</h2> <p> 生活这几年教会我最大的道理的就是,不要跟生活正面刚。吃不下就不吃,睡不着就不睡,错过了就不要追,得不到就等着,死不了就撑着。 </p> </div> <div class="item"> <img src="https://z3.ax1x.com/2021/05/30/2ZPyjO.jpg" alt="dog"> <h2>毒鸡汤</h2> <p> 如果你从来不相信自己,你就永远都不会让自己失望!如果你从来不相信自己,你就永远都不会让自己失望! </p> </div> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
| body { margin: 0; padding: 0; background-color: #ccc; }
.container { width: 1200px; margin: 20px auto; padding: 0 10px; column-count: 5; -moz-column-gap:40px; -webkit-column-gap:40px; column-gap:40px; }
.item { padding: 0 0 10px; }
.item img { width: 100%; }
.item h2 { margin: 10px 0 0; padding: 0; }
.container .item { width: 100%; margin: 0 0 20px; padding: 10px; overflow: hidden; background-color: #ffffff; break-inside: avoid; border: 1px solid #ccc; }
@media screen and (max-width: 1200px) { .container { column-count: 3; width: calc(100% - 40px); box-sizing: border-box; padding: 20px 20px 20px 0; } } @media screen and (max-width: 768px) { .container { column-count: 2; } } @media screen and (max-width: 480px) { .container { column-count: 1; } }
|
总结: