[Jquery]瀑布流

標籤：os   io   cti   ar   div   window   app   ad   

$(window).load(function(e){
    waterfall();
    var dataInt={‘data‘:[{‘src‘:‘1.jpg‘},{‘src‘:‘2.jpg‘},{‘src‘:‘3.jpg‘},{‘src‘:‘4.jpg‘}]};
    $(window).scroll(function(){
        if(checkscrollside){
            var $main=$("#main");
            $.each(dataInt.data,function(i){
                var $oPin=$(‘<div>‘).addClass("pin").appendTo($main);
                var $oBox=$(‘<div>‘).addClass("box").appendTo($oPin);
                var $oImg=$(‘<img>‘);
                $oImg.attr("src",‘./images/‘+$(this).attr("src")).appendTo($oBox);
            });
            waterfall();
        };
    });
    
    function waterfall(){
        var $main=$("#main");
        var $box=$(".box");
        var $pin=$(".pin");
        var $img=$pin.find("img");
        var pinw=$pin.eq(0).outerWidth();
        var ww=$(window).width();
        var col=Math.floor(ww/pinw);
        $main.css({"width":col*pinw,"margin":"0 auto"});
        var pinArr=[];       //定義數組不需要美元符
        $pin.each(function(i) {
            var pinh=$pin.eq(i).outerHeight();
            if(i<col){
                pinArr[i]=pinh;
            }else{
                var minH=Math.min.apply( null,pinArr);
                var index=$.inArray(minH,pinArr);
                var pinl=$pin.eq(index).position().left;       //用.offset().left會有15偏差
                $(this).css({"position":"absolute","top":minH,"left":pinl});
                pinArr[index]+=$pin.eq(i).outerHeight();
            }
        });
    }

    function checkscrollside(){
        var $pin=$(".pin");
        var documentH=$(document).height();
        var scrollTop=$(window).srcollTop();
        var lastpinH=$pin.eq($pin.length-1).offset().top+Math.floor($pin.eq($pin.length-1).outerHeight()/2);
        return(lastpinH<documentH+scrollTop)?true:false;
    }    
})