【新人求教】用写jQuery瀑布流定位布局，第一次打开网页布局正常，之后每次刷新图片定位都会出现不同的错乱

//瀑布流
function waterfall(wrap,box){
    //获取可显示的列数
    var boxwidth=box.eq(0).width()+20,
        windowwidth=$(window).width(),
        colsnumber=Math.floor(windowwidth/boxwidth);
    //设置容器宽度
    wrap.width(boxwidth*colsnumber)
    //数组存储每一个高度
    var i=0,
        colsheight=new Array();
    for(i=0;i<box.length;i++){
        if(i<colsnumber){
            colsheight[i]=box.eq(i).height()+20;
        }
        else{
            //找到目前最小高度
            var I=0,
                minindex=0,
                minheight=colsheight[0];

            for(I=0;I<colsheight.length;I++){
                colsheight[I]<minheight?minheight=colsheight[I]:minheight;
            }
            //找到最小高度的box的索引
            for(I=0;I<colsheight.length;I++){
                colsheight[I]==minheight?minindex=I:minindex;
            }
            //设置定位
            var leftvalue=box.eq(minindex).position().left,
                topvalue=minheight;
            box.eq(i).css({
                "position":"absolute",
                "top":topvalue+"px",
                "left":leftvalue+"px"
            })
            //更新数组中的高度值
            colsheight[minindex]+=box.eq(i).height()+20;
        }
    }
}


$(document).ready(function(){
    var wrap=$("#wrap"),
        box=$(".boxes");
    waterfall(wrap,box);

图片还没有 加载完毕就执行了js的方法