讲一下大概的原理吧，还是先上图：
功能描述：
技术实现方案：
先梳理一下从加载到显示的流程： 1. 加载数据 2. 拼接HTML写入到页面 3. 检查刚刚写入的HTML中的img是否全部加载完成，如果是，进入5、否则进入4 4. 等待图片加载完成 5. 计算每个元素的位置
一开始的时候最头疼的是如何定位的问题，后来经过朋友指导终于解决：计算总共有多少列图片并且把每一列的高度都放到一个数组里面。每当一张图片加载完成的时候就查找这个数组里面最小的值，并且定位当前图片的top设置为这个值，完成后把这个图片的高度加上数组里面的最小值并且返回到数组里面，依次类推。
PS：
因为这个功能代码太多，只能作基本的简单分解代码了：rush:js;">
// 创建用于记录每列高度的数组
_getLowestCol: function() {
t._cols = new Array(5),min = 0;
// 初始化为0
for (var i = 0; i < t._cols.length; i++) {
if (cols[i] < cols[min]) {
min = i;
}
return min;
}
},_reposition: function() {
t._grids.each(function(i,grid) {
//先显示出来
grid = $(grid).show();
var height = grid.outerHeight(),min = t._getLowestCol();
// 定位
grid.animate({
left: (t._colWidth + t._colSpacing) * min,top: t._cols[min],opacity: 1
},1000);
// 记录高度
t._cols[min] += height;});
}
其次开发过程中遇到的难题是：因为如上图所示，鼠标移动到菜单栏需要切换图片列表，并且分别需要用瀑布流加载不同类型的数据。所以要处理在切换页面的时候如何才能做到每个页面只执行一次代码请求接口，而不需要每一次切换都重新请求数据接口，仅仅执行切换显示图片列表的操作就可以了。 考虑到每一个菜单都有一个自定义属性，所以这个问题轻易地解决了：建立一个对象来记录当前菜单是否已经执行过代码，如果没有就执行请求数据 。
rush:js;">
var isLoad = {};//是否载入过
labelType.mouSEOver(function() {
var i = $(this).index();
var api = _this.attr('api');//接口标识
if(! isLoad[ api ]){
isLoad[ api ] = i;
loadData(wrapper,api);
}
});
以下为全部代码： html：
rush:xhtml;">