for(var i=0;i<oBoxs.length;i++){
if(i<cols){
hArr.push(oBoxs[i].offsetHeight);
}else{
var minH=Math.min.apply(null,hArr);
var index=getMinhIndex(hArr,minH);//封装 找最小值的索引
oBoxs[i].style.position="absolute";
oBoxs[i].style.top=minH+"px";
//oBoxs[i].style.left=oBoxs[index].style.left;
oBoxs[i].style.left=oBoxs[index].offsetLeft+"px";
hArr[index]+=oBoxs[i].offsetHeight;
}
}
存放图片的div都从id为main的父元素div那里继承了位置属性relative。relative是相对于自身原位置的定位，虽然元素不在原位置了， 但是还占据着原位置的空间，别的元素不能摆放到那里，就是占着茅坑不拉屎的意思，一个元素占了两个位置；absolute是相对于父元素的定位，元素改变位置后，不再占用原来位置的空间，原位置的空间可以摆放别的元素，有利于元素按自己想要的顺序重新排列。具体relative和absolute的区别可以去W3C的CSS阅读或者百度。
这三种方法布局，其实原理上讲是两个，js和jquery原理一样，css是另一种原理。
js和jquery是通过计算来排序和加载图片的，从第一行开始遍历，找出最矮那一列，把新的图片加到最矮那一列下面，并把新图片的高度加到最矮那一列的高度上，又产生新的最矮的一列，继续遍历，把新的图片加到最矮那一列下面，并把新图片的高度加到最矮一列的高度上，以此类推。等到原始页面上图片都加载完时，从后台读取新的图片按照上面的方法加载到各列。
css3用column-width属性规定每列的宽度，系统会自动计算一屏能分几列，然后把所有的图片自动分列排序，整个过程系统自动完成，不受你的控制，也就是说图片的加载顺序你不能向js那样控制先加载哪个后加载哪个。