$(window).ready(function(){

 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, value ){

                var $oPin = $('<div>').addClass('pin').appendTo( $( "#main" ) );

                var $oBox = $('<div>').addClass('box').appendTo( $oPin );

                $('<img>').attr('src','./images/p_0' + $( value).attr( 'src') ).appendTo($oBox);

            });

            waterfall();

        };

    }

});

var waterfall=function(){

 var $pin=$("#main>.pin");

 var pinwidth=$pin.eq(0).outerWidth();

 var li=Math.floor($(window).width() / pinwidth);

 $("#main").css({

  'width': pinwidth*li,

  'margin': '0 auto'

  

 });

 var arry= [];

 $pin.each(function(a,b){

  var liheight=$pin.eq(a).outerHeight();

  if(a<li){

   arry[a]=liheight;

   

  }

  else{

   var limin=Math.min.apply(null, arry);

   var liindex=$.inArray(limin,arry);

    $( b).css({

                'position': 'absolute',

                'top': limin ,

                'left': $pin.eq( liindex).position().left

           });

            arry[liindex]+=$pin.eq(a).outerHeight();//arry[liindex]+=$pin.eq(b).outerHeight();

       

  }

 });

}

function checkscrollside(){

    var $Pin = $( "#main>div" );

    var lastPinH = $Pin.last().get(0).offsetTop + Math.floor($Pin.last().height()/2);

    var scrollTop = $( window ).scrollTop()

    var documentH = $( document ).width();

    return (lastPinH < scrollTop + documentH ) ? true : false;

}