The expansion of waterfall flow

Effect: Randomly display a lump of picture in a section of a page and then scatter the effect of the waterfall flow layout by animation

HTML is the same as before, CSS removes the Float property of box

The idea is to first row through absolute positioning, and then according to the layout of the waterfall flow of ideas to line down.

$ (window). On (' Load ',function() {beginshow ();    Firstline (); WaterFall ();})//generate range random numberfunctionRandom (n,m) {varc = m-n+1; returnMath.floor (Math.random () * C +n);}//Photo Wall Center displayfunctionbeginshow () {var$boxs = $ (' #main >div '); //Loop through each div and randomly display it in the page$boxs. each (function(index,value) {varw = random (window). Width ()/2-200,$ (window). Width ()/2+200)-400; varh = random (200,600) +200; $ (value). css ({' Position ': ' absolute ',            ' Top ': w + ' px ',            ' Left ': H + ' px '        })    })}//move photos, construct the first row of photosfunctionFirstline () {var$boxs = $ (' #main >div ');//Get Box    varPhotowidth = $boxs. EQ (0). Outerwidth ();//Get photo width    varPhotonum =math.floor ($ (window). Width ()/photowidth);//get the number of columns //$ (window). Click (function () {        //Click on the rear cloth photo wall        //$boxs. EQ (0). Animate ({        //' top ': ' 10px ',        //' left ': ' 20px '        //},2000);        varW = ($ (window). Width ()-photonum*photowidth)/2; $boxs. each (function(index,value) {if(Index <photonum) {$boxs. EQ (index). Animate ({' Top ': ' 10px ',                    ' Left ': w + ' px '                },4000) W+=Photowidth; }        })  //  });}//according to the first row, the waterfall layoutfunctionWaterFall () {var$boxs = $ (' #main >div ');//Get Box    varPhotowidth = $boxs. EQ (0). Outerwidth ();//Get photo width    varPhotonum =math.floor ($ (window). Width ()/photowidth);//get the number of columns   //$ (' #main '). Width (photonum * photowidth). css (' margin ', ' auto ');    varHARR = []; $boxs. each (function(Index, value) {varh = $boxs. EQ (index). Outerheight ();//take the height of each picture        if(Index <photonum) {Harr[index]= h;//assign a height to the first row of photos}Else{            varMinH = Math.min.apply (NULL, HARR);//the shortest element in an array            varMinhindex = $.inarray (Minh,harr);//the height of the shortest photo            varm = ($ (window). Width ()-photonum*photowidth)/2;//left white width on both sides of the center of the photo$ (value). Animate ({' Position ': ' absolute ',                ' Top ': MinH + ' px ',                ' Left ': minhindex*photowidth+m + ' px '            },4000) Harr[minhindex]+ = $boxs. EQ (index). Outerheight ();//change the height to regain the location of the shortest photo        }    })}    

View Code

The expansion of waterfall flow