响应式布局页面之瀑布流布局浅析

2019独角兽企业重金招聘Python工程师标准>>>

瀑布流式布局（简称瀑布流）最先在网站上应用 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网等页面都采用了这种布局。那么什么是瀑布流呢？瀑布流的好处在哪？

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

这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 — 瀑布流式布局。

瀑布流的布局原理：

这种布局是基于响应式布局的。他可以根据浏览器宽度以及每列宽度计算出列表个数。来动态加载图片。且需要预加载几张图片，再当滚动条滚动的时候，对每一列的底部位置做检测，如果在屏幕中或屏幕上方，则立即append一个新图片。因为，滚动是连续的，所以，我们实际看到的效果是图片不断load出来。(如果加载的图片太多最好做好本地缓存)。让用户的体验效果更佳。

瀑布流的实现方法：

方法一：

当浏览器宽度改变的时候，页面上有个id为waterFallDetect空span标签，这个标签作用有两个：一是实现两端对齐效果，二是用来检测瀑布流布局是否需要刷新。

检测原理如下：

• 该span标签宽度与一个列表宽度一致，当浏览器宽度变小的时候，如果小到一定程度，显然，浏览器最右边的列表就会跑到下一行，把空span挤到后面去，空span发生较大的水平位移，显然，可以通知脚本，布局需要刷新；当浏览器宽度变大的时候，如果变大的尺寸超过一列的宽度，显然，这个空span灰跑到第一行去，同样是发生较大的水平位移，因此，又可以通知脚本刷新瀑布流布局了。

• 这个方法的好处是几乎没有计算就可以一点不差地知道何时瀑布流布局需要刷新。这显然要比设置resize定时器+位置尺寸计算要简单高性能地多。

方法二、

漂浮。

各列固定宽度，并且左浮动；

更多数据加载时，直接在其后加入图片即可。

转载于:https://my.oschina.net/u/1403185/blog/208396