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

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

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

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

瀑布流的布局原理：

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

瀑布流的实现方法：

方法一：

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

检测原理以下：

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

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

方法2、

漂浮。

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

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