瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。
一. 瀑布流布局的原理?
瀑布流布局的特点是等宽不等高。为了让最后一行的差距最小,从第二行开始,需要将图片放在第一行最矮的图片下面,以此类推。父元素设置为相对定位,图片所在元素设置为绝对定位。然后通过设置 top 值和 left 值定位每个元素。 瀑布流布局如下图所示:
二、 应用瀑布流布局的好处?
1、因为瀑布流有吸引力,瀑布流会在它的页面底部给你不断地加载新的暗示信息,滑动的时候会不停的出现新的东西,通过给出不完整的视觉图片去吸引你的好奇心,让你停不下来想要不断的向下探索。采用这种方案的产品,往往可以通过瀑布流加强用户的停留时间,提高用户的使用粘度。
2、用户一扫而过的快速阅读模式,短时间内可以看到大量的信息,瀑布流的懒加载模式,又避免点击的的翻页操作,在最小的操作成本下能够获得最多的内容体验,瀑布流的视觉方式,让人容易沉浸其中,不容易被打断。
3、另外瀑布流的主要特质就是:定宽而不定高,这样的页面设计区别于传统的矩阵式图片布局模式,巧妙的利用视觉层级,视线的任意流动来缓解视觉的疲劳。
(效果示意图)
三、瀑布流可以引用到哪些场景?
瀑布流更适合那些随意浏览,不带目的性的使用场景,就像是在逛街一样,边走边看,同时被街边琳琅满目的商品吸引着,所以比较适合的图片、小说、资讯类的场景,以现有的成功案例来说,以 UGC 为主的相关网站很多在使用瀑布流进行承载。
下图: 天猫瀑布流布局
下图: 跨境电商洋葱瀑布流布局
下图: 小红书商城瀑布流
综上所见,瀑布流已成为移动端兴起的一种新的布局方式和体验,可以极大的提高了内容的加载效率,让内容看起来很丰富。
四、局限性 (技术只有最适合的,没有最好的)
1.它不适合内容搜索业务的网站使用,信息量过多会让用户找不到答案,会把简单的浏览体验变得复杂化
2.电商网站也不要过渡使用瀑布流,产品过于丰富,让用户无法作出选择,也会让用户感到疲惫
总结:瀑布流是一种创新,适度使用会使用户体验有一个显著提升,过度使用则会适得其反......