Front Page--implementation of waterfall flow layout

The blink of an eye for 3 months has not been updated .... The recent inexplicable fascination on the front end various effects of the realization of .... Recently, I have recorded some of the effects I used in the past few days.

Today's record is the layout style--the waterfall flow layout, which I focus on in my bi set.

When it comes to the waterfall flow layout, let's take a picture to illustrate what a waterfall flow is all about.

This is one of my bi set (the content is I temporarily climbed down from other sites to test ...), then we can see from this picture in general the waterfall flow is some equal width of the picture to arrange the display, because each picture is not the same size, and I showed in the picture below the various information is different, So why do they have to ask for the same width when they are not uniformly high in the frame of the display? This is the key to the waterfall flow implementation.

Then we will step by step explain how it is implemented, this process also understand why this is the design, first, we want to arrange in the page to show the number of boxes, the following is the waterfall Flow structure diagram:

The white part of this picture is a visual area of the browser, so the gray part of the middle I named him ' Main ', which holds the picture of the middle display and separates it from the other elements on the page, the first question is, how do we know how to put a few pictures in this main? And how does the width of this main be determined? On the code!

#main {    position: relative; text-align: Center; margin: 0 auto;}

We first set the relative positioning, and the DIV is set to center, here is a place to note is that before looking at a lot of examples using Text-align:center to center the Div to find that it is not effective, That's because when we set the Text-align and don't specify its margin value, we have to set the margin value at the same time and then the center effect will take effect, because we want to work with the navigation bar at the top of the page, so here I set the first value of margin to 0, The second setting is automatic (auto), why do you set it so?

the margin shorthand property sets all margin properties in a declaration. This property can have between 1 and 4 values. This shorthand property sets the width of all margins for an element, or sets the width of the margins on each edge. Note here that in CSS, the properties of margin and padding are set clockwise, that is, the upper, right, bottom, left, this order.

So when the value of margin is four, these 4 values are: Top margin, right margin, bottom margin, left margin.

When the order of three values is: Top margin, left and right margin, bottom margin.

When two values are in order: up and down margins, left and right margins.

When it is a value, it is the full margin.

now we are going to start putting pictures, which is why we have to use the equal width of the picture, because the width of the fixed we can dynamically calculate a different size of the browser can put a few pictures to show.

Here I did not set the width of the main, but after the calculation of a few pictures to set the width of it, because we are not only the display of pictures, as well as the content below the picture, so in the calculation of the width of each picture to be the container of the picture is included in the picture above the width of the red box, And because there are margin values between each of the frames, we also have to consider when calculating, because I'm using jquery, so here I'm going to get the width value through the Outerwidth () method.

//dynamic Add Waterfall picture function functionfunctionWaterfall () {//Get a Display box object    var$boxs = $ ("#main >div" ); //the width of a block box    varw = $boxs. EQ (0). Outerwidth (); //The number of frames that can fit in each row "window width divided by one block box width"    varcols = Math.floor (($ (window). Width ()-30)/W); //set the width and margin for the outermost main element$ (' #main '). Width (w*cols). CSS (' margin ', ' O auto '); //The height used to store the addition of all the block boxes in each column.     varHarr=[]; $boxs. each (function(Index, value) {varh =$boxs. EQ (index). Outerheight (); if(Index <cols) {harr[index]= h;//num block boxes in the first row are first added into the array Harr}Else{            varMinH = Math.min.apply (NULL, HARR);//the minimum value in the array Harr Minh            varMinhindex =$.inarray (MinH, HARR); $ (value). css ({' Position ': ' absolute ', ' top ': minh+ ' px ', ' left ': minhindex*w + ' px '            }); //The height of the minimum high element of the array + add on the display box [i] block box highharr[Minhindex] + = $boxs. EQ (index). Outerheight ();//update sizing After adding a block box        }    });}

The idea here is to get the viewable width of the browser, then divide the width of each box to figure out how many frames can be displayed, and then use an array of Harr to maintain the height of each column, and here I used each method in jquery to cycle the height of each column. The two parameters passed in here, index is the index number of the display box, and value is the jquery object for the display box.

First, according to the index number to the corresponding height of the display box, this height is the full width of the margin, and then save the value in the array, because the maximum number of blocks for each row was calculated, so here to make a judgment, the first line is filled first, and then began to fill the second row of the display box, I use the Math.min.apply () method to get the smallest value in the array, and then through the InArray () method provided by jquery to get the minimum value of the column, the first parameter is the minimum value, the second parameter is the array to be judged, and then we fill the corresponding box, Finally, the full height of the newly added frame plus the smallest height is re-saved to the array, and the new display box is continuously added to continue the loop judgment.

So now we're going to be adding a new display box from the JSON data that's coming in the background, because every project is going to be different, and I don't show the exact code here, so I'm going to go through the swipe of the scroll bar to determine when to start adding new frames dynamically.

Next I will tell the idea of my judgment, first of all, after the first set of box add finished to get the last fill height of the box, and then add the height of the box itself, because I think the user will generally browse to the last near the time to start the dynamic fill, So I'm here to determine whether the current scrollbar scrolling distance is greater than the default height of the page plus the height of the last box to the top of the screen, and if it's larger than the description, it's time to fill the box:

//Monitor scroll barWindow.onscroll=function(){        if(Checkscrollside ()) {Addwaterfall (dataint);//This is a function of dynamically populating new framesWaterfall ();    }; }//determine if you need to continue loading the waterfall streamfunctioncheckscrollside () {var$lastBox = $ (' #main >div '). Last (); varLastboxdis = $lastBox. Offset (). Top + Math.floor ($lastBox. Outerheight ()/2);varScrollTop =$ (window). scrolltop (); varDocumenth =$ (window). Height (); return(Lastboxdis<scrolltop+documenth)?true:false;}

Now the entire waterfall flow of the show is complete, today recorded here, stay in reserve.

Front Page--implementation of waterfall flow layout