瀑布流布局原理及应用场景

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

一. 瀑布流布局的原理？

瀑布流布局的特点是等宽不等高。为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。父元素设置为相对定位，图片所在元素设置为绝对定位。然后通过设置 top 值和 left 值定位每个元素。瀑布流布局如下图所示：

二、应用瀑布流布局的好处？

1、因为瀑布流有吸引力，瀑布流会在它的页面底部给你不断地加载新的暗示信息，滑动的时候会不停的出现新的东西，通过给出不完整的视觉图片去吸引你的好奇心，让你停不下来想要不断的向下探索。采用这种方案的产品，往往可以通过瀑布流加强用户的停留时间，提高用户的使用粘度。

2、用户一扫而过的快速阅读模式，短时间内可以看到大量的信息，瀑布流的懒加载模式，又避免点击的的翻页操作，在最小的操作成本下能够获得最多的内容体验，瀑布流的视觉方式，让人容易沉浸其中，不容易被打断。

3、另外瀑布流的主要特质就是：定宽而不定高，这样的页面设计区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动来缓解视觉的疲劳。

（效果示意图）

三、瀑布流可以引用到哪些场景？

瀑布流更适合那些随意浏览，不带目的性的使用场景，就像是在逛街一样，边走边看，同时被街边琳琅满目的商品吸引着，所以比较适合的图片、小说、资讯类的场景，以现有的成功案例来说，以 UGC 为主的相关网站很多在使用瀑布流进行承载。

下图: 天猫瀑布流布局

下图: 跨境电商洋葱瀑布流布局

下图: 小红书商城瀑布流

综上所见，瀑布流已成为移动端兴起的一种新的布局方式和体验，可以极大的提高了内容的加载效率，让内容看起来很丰富。

四、局限性（技术只有最适合的，没有最好的）

1.它不适合内容搜索业务的网站使用，信息量过多会让用户找不到答案，会把简单的浏览体验变得复杂化

2.电商网站也不要过渡使用瀑布流，产品过于丰富，让用户无法作出选择，也会让用户感到疲惫

总结：瀑布流是一种创新，适度使用会使用户体验有一个显著提升，过度使用则会适得其反......