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()); //获取滚动条到左边的垂直宽度*/