$(window).on('load',function(){?waterfall();?var dataInt={'data':[{'src':'4.jpg'},{'src':'5.jpg'},{'src':'6.jpg'}]};?$(window).on('scroll',function(){??if(checkScrollSlide()){???$.each(dataInt.data,function(index,value){????var $oPin=$('<div>').addClass('pin').appendTo($('#main'));????var $oBox=$('<div>').addClass('box').appendTo($oPin);????$('<img>').attr('src','images/'+$(value).attr('src').appendTo($oBox));????});????waterfall();??};?})})function waterfall(){?var $aPin=$('#main>div');?var iPinW=$aPin.eq(0).outerWidth();?var num=Math.floor($(window).width()/iPinW);?$('#main').width(iPinW*num).css('margin','0 auto');?var pinHArr=[];?$aPin.each(function(index,value){??var pinH=$aPin.eq(index).outerHeight();??if(index<num){???pinHArr[index]=pinH;??}else{???var minH=Math.min.apply(null,pinHArr);???var minHIndex=$.inArray(minH,pinHArr);???$(value).css({????"position":"absolute",????"top":minH+"px",????"left":minHIndex*iPinW+"px"????})???pinHArr[minHIndex]+=$aPin.eq(index).outerHeight()???}??})??}function checkScrollSlide(){?var $lastBox=$('#main>div').last();?var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);?var documentH=$(window).height();?var scrollTop=$(window).scrollTop();?return(lastBoxDis<documentH+scrollTop)?true:false;?}