利用JQuery制作一个瀑布流

今天通过看视频，了解到瀑布流的实现方式。

$(document).ready(function(){

    $(window).on("load",function(){
        imgLocaton();
    });
});
function imgLocaton(){
    var box=$(".box");
    var boxWidth=box.eq(0).width();//因为所有的宽度都相同所以任意一个的高度就代表所有元素的高度
    var Num=Math.floor($(window).width()/boxWidth);//摆放个数
//    console.log(Num);
    var boxArr =[];//定义一个数组用来存放所有元素的高度。
    box.each(function(index,value){//利用each循环用来遍历数组。两个参数一个是索引某一个元素
    //另一个参数的含义是获取一个元素的对象
    console.log(index+"--"+value);
    var boxHeight=box.eq(index).height();
    if(index<Num){
        boxArr[index]=boxHeight;
//        console.log(boxArr);
    }
    else{
        var minboxHeight=Math.min.apply(null,boxArr);//获取某一排最小高度
//        console.log(minboxHeight);
        var minboxIndex =$.inArray(minboxHeight,boxArr);
//        console.log(minboxIndex);
//        console.log(value);
        $(value).css({
            "position":"absolute",
            "top":minboxHeight,
            "left":box.eq(minboxIndex).position().left
        });
        boxArr[minboxIndex]+=box.eq(index).height();
    }
    });
    
}