瀑布流布局

作品链接：http://1.helloweiwei.applinzi.com/瀑布流布局/瀑布流布局.html

分析：
瀑布流布局：等宽不等高，向上拖动的时候可以一直加载。实现的三种方法：js、jQuery、css3多栏布局
方法：1、通过绝对定位计算每个小块的位置来进行布局，因此父元素是relative
2、定义一个div叫box的，用来定义每个图块之间的间隔
3、利用padding来拉开盒子与盒子之间的距离，之后用offsetHeight（它获取的高度不包括margin，包括padding，因此用padding）来获取每个盒子的高度—-行高
4、将box进行浮动时，盒子的高度有里面的子元素来决定
5、jquery中的outerWidth()是用来获取元素的宽度（包括padding和border的）
6、jQuery遍历方法：.eq(index) 整数，指示元素的位置（最小为 0）。如果是负数，则从集合中的最后一个元素往回计数。

如果给定表示 DOM 元素集合的 jQuery 对象，.eq() 方法会用集合中的一个元素构造一个新的 jQuery 对象。所使用的 index 参数标示集合中元素的位置。

7、$(selector).each(function(index,element))用来遍历
参数 描述
function(index,element)
必需。为每个匹配元素规定运行的函数。
index - 选择器的 index 位置
element - 当前的元素（也可使用 “this” 选择器）

8、Math.min()的参数可以是一串数字，但是不能是数组
举例：
console.log(Math.min(1,3,5,2));
VM229:1 1

var a=[1,3,2,4];
console.log(Math.min(a));
VM331:1 NaN
当参数是数组时，可以通过apply()对Math.min()进行调用。Math.min.apply(null,arr)这样写的原因参见博文http://blog.csdn.net/qi1271199790/article/details/53457754

9、jQuery.inArray()函数用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。

该函数属于全局jQuery对象。

语法

jQuery 1.2 新增该静态函数。

jQuery.inArray( value, array [, fromIndex ] )
参数

参数 描述
value 任意类型用于查找的值。
array Array类型指定被查找的数组。
fromIndex 可选/Number类型指定从数组的指定索引位置开始查找，默认为 0。
返回值

jQuery.inArray()函数的返回值为Number类型，返回指定值在数组中的索引。如果没有找到，则返回 -1。

如果数组中存在多个相同的值，则以查找到的第一个值的索引为准。

注意：如果要判断数组中是否存在指定值，你需要通过该函数的返回值不等于(或大于)-1来进行判断。

10、页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），是只要等html的DOM节点加载完毕就会触发，并不会等待资源全部加载完毕，包括图片，这样你的图片没有自身的高，所有就会出现这样都等高的情况。二是$(window).on(‘load’,function(){});指示页 面包含图片等文件在内的所有元素都加载完成。(可以说：ready 在onload 前加载！！！)