瀑布流布局再现

蘑菇街、花瓣网一些网站用的都是瀑布流式的布局，文本就尝试用js和jQuery分别实现这个布局。

瀑布流需求

具体分析来看，瀑布流实现主要依靠两个部分的功能实现。

需求一：第一行顺序排列，第二行第一个放在第一行最短的地方，第二个放在第一行次短的地方，依次排列。

需求二：最后一张图片A露出其高度一半后，开始加载A图片。

可以将图片分为两类，第一类是第一行按顺序排列，第二类是后续元素，获取前排元素中最短的位置排列上去。

这边考虑设置一个放置每列高度的数组，然后新元素添加到数组中值最小的那一列，随后更新数组，即可实现需求。

考虑最后一张图片的加载与否，借以判断的条件是满足最后一张图片自身高度offsetHeight的一半加上其距顶端的实际距离offsetTop比页面可视区clientHeight加上滚动条已滚动的长度scrollTop短，即可触发。

同时考虑到兼容性，以上几个偏移量的获取需要区分混杂模式（ie7之前版本）和标准模式。混杂模式下用document.body获取，标准模式下用document.documentElement获取。

另：后续图片的加载，本处采用模拟设置传入JSON格式的图片数据的方式。

这个布局的实现主要是需要对页面的元素高度、相对偏移等的获取有清晰的了解。