使用jq实现瀑布流闭包-1

瀑布流是一种比较常见的网页排布，多用于产品展示或者一些特殊的列表（需要图文结合或者纯图片的列表）。在这些列表中因为图片的大小不一不能进行统一的宽高进行矩阵式排列，所以产生了瀑布流。瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动又缓解了视觉疲劳。

先讲我做的瀑布流，传统的瀑布流是不会跟随窗口的大小变化而改变显示的行数的，这个确实不实用。在我的程序里面我加入了这个功能。这个功能其实就是在窗口变化的时候重新调用一次函数。

我的思路是这样的，使用<ul><li></li></ul>的形式加载图片和文字，然后

1、将这些li设置为绝对定位。

2、在初始化的时候获取窗口的高度，用窗口的高度除以li的宽度并取整（取整，不是四舍五入）获得最多可以显示的行数。

3、将所有的li存进数组list，得到数组后做一个单循环，根据li的在数组的下标判断li的位置并设置它的top、left

排列的思路是这样滴，第一列第一个处于0位，那么list[0]的top值为10px，left则为0，第二个也就是list[1]top值与第一位一样，left值就是list[0]的width加上两个li之间的左右间距，以此类推，知道第一列结束。从第二列起获取在这个li上面的第一个li的高度和top值，这个值加上两个li的之间的上下间距就是该li的top值，left值可以这样判断：因为在瀑布流里面所有的width是一样的，所以可以使用该li在数组中的下标对最大显示的行数求模乘以width加上两个li之间的左右间距的和来获得。

例如：一个瀑布流中，li的宽度width为200，最大显示的行数maxNum为4，上下间距为10,左右间距为20，那么位于该列表中的第x位的li list[x]的top值和left值为：

top：$(list[x]).css({top:parseFloat(list[x - maxNum] .height) + list[x - maxNum].css("top") + 10 })

left：$(list[x]).css({left:(width + 20)*(x%maxNum)})

ok，实现的原理差不多就是这样，下次在把代码贴上来。（本人语文体育老师教的，写的不好请多见谅）