ajax学习笔记之瀑布流

此为列数固定的瀑布流（就是无论放大缩小浏览器百分比 列数不变） 是比较简单的版本 学习用 

这篇只是适合我自己记忆的笔记 可能不是适合所有人 随意看看就好

布局很简单 就是一个ul下4个li （个数可随意）

主函数部分： 

请求来的数据data格式是一个数组中包含了多个对象  一个对象既包含了图片src和宽高和介绍等信息  解析后得到这个数组

li的宽度固定 所以按比例设置图片的高

得到的数据不是按顺序 从左往右依次插入四个li中  因为图片宽度虽然固定 但是高度不一定 如果按顺序 会出现 四列的高度可能出现很大的差距

所以都是在四个li中长度最短的那列继续插入。详见 getShort（）；

getShort()函数部分;

getTop( obj )函数部分：

这个函数得到的obj距离文档的top值   直接用offsetTop得到的是与父级的top值 其实是很简单就是递归的得到offsetTop值

这个函数在滚轮事件中用到

onscroll事件函数实现：

瀑布流不是一次性把所有数据都取过来，先取第一页，往下滑 ，到底没数据了，在请求第二页数据，以此类推

怎么判断数据到底了，就是判断用最短那列li 就是图中两条蓝线的比较 li的高度+距文档顶部的距离 < 可视区的高度+滚轮滚动的距离 就达到条件

注意：这里有个问题是 插入数据是需要时间的 当你判断那条li为最短的时候 可能上一次数据已经请求了 但是还没插入 这样程序会还以为这列最短 就会再往这列插入数据

所以这里设置了一个开关 变量 b  在执行完插数据的操作就将他置为false  插完数据再将它置为true  只有为true 滚轮才能触发请求插数据的操作。