jQuery实现瀑布流布局_jquery

").addClass('pic').appendTo($(oBox));
                 $("").attr("src","images/"+$(value).attr("src")).appendTo(oPic);
             });
             waterfall();
         }
     })
 });
 //流式布局主函数;
 function waterfall () {
     var $boxs=$("#main>div");
     //获取#main元素下的直接子元素div.box;
     //获取每一列的宽度;
     var w=$boxs.eq(0).outerWidth();
     //outerWidth()获取包含padding和border在内的宽度;
     //var w=$boxs.eq(0).width();
     //width()只能获取给元素定义的宽度;
     var cols=Math.floor($(window).width()/w);
     //获取多少列;
     $("#main").width(w*cols).css("margin","0 auto");
     //设置#main元素的宽度和居中样式;
     var hArr=[];
     //每一列高度的集合;
     $boxs.each(function (index,value) {
     //遍历每一个box元素;
     //为了找到之前所有元素的最低点,然后将本元素设置到最低点之下;
         var h=$boxs.eq(index).outerHeight();
         //每一个box元素的高,
         if (index              hArr[index]=h;
             //确定每列第一个元素的高度;
         } else{
             var minH=Math.min.apply(null,hArr);
             //得出列高数组中的最小高度;
             var minHIndex=$.inArray(minH,hArr);
             //$.inArray()方法得出元素(minH)在数组(hArr)中的index值;
             //console.log(value);
             //此时的value是第一行之后的所有的box元素的DOM对象!;
             $(value).css({
             //$(value):将DOM对象转换成jQuery对象,才能继续使用jQuery方法;
                 "position":"absolute",
                 "top":minH+"px",
                 "left":minHIndex*w+"px"
             });
             hArr[minHIndex]+=$boxs.eq(index).outerHeight();
             //最低高元素的高度+刚添加到最低高度下的元素的高度=新的列高;
         };
     });
     // console.log(hArr);
 };
 function checkScrollSlide () {
     var $lastBox=$("#main>div").last();
     var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
     var scrollTop=$(window).scrollTop();
     var documentH=$(window).height();
     return (lastBoxDis  }