瀑布流三部曲之jquery

jquery简化了javascript实现，html 和css部分代码与http://blog.csdn.net/qq_14886653/article/details/52613455
javascript实现瀑布流相同，所以不再给出。下面给出js代码：

$( window ).on( "load", function(){
    // 调用waterfall函数
    waterfall();
    var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
    window.onscroll=function(){
        // 拖动滚动条时
        if(checkscrollside()){
            $.each(dataInt.data, function(index, item){//动态加载数据，通过each方法遍历dataInt对象

                var $oPin = $('<div>').addClass('pin').appendTo($("#main"));
                var $oBox = $('<div>').addClass('box').appendTo($oPin);
                $('<img>').attr('src', 'images/'+$(item).attr('src')).appendTo($oBox);
            });
            waterfall();
        }
    }
});
function waterfall(){
    // 计算及定位数据块显示分散效果
    var boxes=$(".pin");
    var parent=$("#main");
    var boxesW=boxes.eq(0).outerWidth();//获取盒子外宽度，包括margin
    var windowW=$(window).width();//获取可视窗口宽度
    var cols=Math.floor(windowW/boxesW);//计算列数
    parent.css({
        "width":cols*boxesW+"px",
        "margin":"0 auto"
    });//居中

    var boxH=[];
    boxes.each(function(index,item){
        if(index<cols){
            boxH[index]=boxes.eq(index).outerHeight();
        }else{
            var minH=Math.min.apply(null,boxH);
            var minIndex=$.inArray(minH,boxH);//inArray函数返回某值在数组中的索引
            $(item).css({
                "position":"absolute",
                "top":minH+"px",
                "left":minIndex*boxesW+"px",
            });//定位元素
            boxH[minIndex]+=boxes.eq(index).outerHeight();//增加高度
        }
    })
}


function checkscrollside(){
    // 检测是否具备了加载数据块的条件
    var parent=$("#main");
    var boxes=$(".pin");
    var lastH=boxes.last().offset().top+Math.floor(boxes.last().outerHeight()/2);
    var scrollH=$(window).scrollTop()+$(window).height();
    return (lastH<scrollH)?true:false;
}

上述代码，有详细注释，不在细说实现。
最后附上三个瀑布流的项目文件地址：
https://github.com/wd4219/waterfall.git