JQ实现瀑布流图片定位

1、jQuery是继prototype之后又一个优秀的Javascript框架

2、$(window).width() 浏览器视窗的宽度

outerWidth() = padding+border+width;

width() = width

/*在jQuery中，width()方法用于获得元素宽度；innerWidth()方法用于获得包括内边界（padding）的元素宽 度，outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度，如果outerWidth()方法的参数为 true则外边界(margin)也会被包括进来，即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。同 理，innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。

所以说：对于同一个元素应该是：width()<=innerWidth()<=outerWidth()<=outerWidth(true);*/

3、$.inArray(所找元素,数组) 该方法用于获取元素的索引

4.jQuery遍历的函数

each $boxs.each(function(index,value){

}); index 索引值，value对应的值

5.eq(n),从结果集中选取第n的元素

6.$.inArray(value,arr)工具函数，用来判断某个值在数组中的索引

7.each遍历的value是DOM对象。将value DOM对象转换为jQuery对象才能使用其方法 ：$(value)

jQuery的$.inArray()方法直接可以得到一个数在数组中的索引

$(dom) 将Dom对象转换成jQuery对象

$(window).on("load",function(){

    waterfall();

})

function waterfall(){

    var $boxs=$("#main>div");

    var w=$boxs.eq(0).outerWidth();

    var cols=Math.floor($(window).width()/w);

    $("#main").width(w*cols).css("margin","0 auto");

    var hArr=[];

    $boxs.each(function(index,value){

        var h=$boxs.eq(index).outerHeight();

        if(index<cols){

            hArr[index]=h;

        }else{

            var minH=Math.min.apply(null,hArr);

            var minHIndex=$.inArray(minH,hArr);

            $(value).css({

                "position":"absolute",

                "top":minH+"px",

                "left":minHIndex*w+"px"

            })

            hArr[minHIndex]+=$boxs.eq(index).outerHeight();

        }

    })

}

【原理】css3多栏布局column

【知识点】

①column的浏览器兼容问题，不同内核要写其前缀

-webkit Google浏览器内核

-ms IE

-o 欧朋opera

-moz 火狐FireFox

②column-width 和column-count没有必要同时出现

③column-rule设置列与列之间的边框

④column-gap 设置列间距，不一定定义多少，实际就显示多少。其计算规则：用当前浏览器宽口宽除以定义的列宽，剩下的距离平均分配

【css3和js实现方法比较】

--css3方式--

1：不需要计算，浏览器自动计算，只需设置1列宽，性能高

2:列宽随着浏览器宽口大小进行改变，用户体验不好；

3：图片排序按照垂直顺序排列，打乱图片显示顺序

4.图片加载还是需要js

--js方式--

js实现的瀑布流不会有上面的缺点，但是性能相对要差！

/*alert($(window).height()); //浏览器时下窗口可视区域高度

alert($(document).height()); //浏览器时下窗口文档的高度

alert($(document.body).height());//浏览器时下窗口文档body的高度

alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin

alert($(window).width()); //浏览器时下窗口可视区域宽度

alert($(document).width());//浏览器时下窗口文档对于象宽度

alert($(document.body).width());//浏览器时下窗口文档body的高度

alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin

alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度

alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度*/