$(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;

}