The realization of JS waterfall flow layout

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

This is a screenshot of my graduation (the content is I temporarily climbed down from other sites to test ...). Then we can see from this picture that the waterfall flow is roughly equal to a number of unequal-width pictures to arrange the display, because each picture is not the same size, and I have shown below the picture all kinds of information are different, So the boxes that cause these shows are not uniform in height, so why do they need to be the same width? This is the key to waterfall flow implementation.

So let's take a step-by-step description of how it is implemented, and this process also explains why this is so designed, first of all, we have to arrange the number of boxes to display in the page, below is the chart of the waterfall Flow:

The white part of the picture is the viewable area of the browser, so the gray part of the middle I named him ' main ' to hold the picture in the middle and separate from the other elements in the page, so the first question comes up, How do we know how many pictures to change in this main? And what about the width of this main? On the code!

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

Let's set the relative positioning, and set this div to center, here is a place to note that there are many examples of using Text-align:center to center Div after the discovery is not effective, That's because when you set the Text-align and don't specify its margin value, we have to set the margin value and then the center effect will not take effect, because you want to match the navigation bar at the top of the page, so I set the first value of margin here to 0, The second is set to Auto (auto), why is it so set up?

The margin shorthand property sets all the margin attributes in a declaration. The property can have 1 to 4 values. This shorthand property sets the width of all the outer margins of an element, or sets the width of the outer margin on each edge. Notice here that in CSS, the properties such as margin and padding are set clockwise, that is, up, right, down, left, in this order.

Then when the value of the margin is four, the values of these 4 are: upper margin, right outer margin, outer margin, left margin.

The order of three values is: Upper outer margin, left and right outer margin, bottom margin.

When it is two values, the order is: up and down, outer margin, left and right.

When it comes to a value, it's all the outer margin.

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

I didn't set the width of main here first, it is only after the calculation of the placement of a few pictures to set its width, because we are not only the display of pictures, and the contents of the picture below, so in the calculation of the width of each picture will be wrapped in the picture of the container, which is the width of the picture in the red box, And because there is a margin value between each display box, we also need to think about it when we compute it, because I'm using jquery, so I'm going to use the Outerwidth () method to get the width value here.

Dynamic Add waterfall Picture function function waterfall () {   //Get Display Box Object     var $boxs = $ ("#main >div");

   //width of a block box     var w = $boxs. EQ (0). Outerwidth ();

   //The number of display boxes that can be accommodated in each row "window width divided by a block width"     var cols = Math.floor (($ (window). Width () -30)/W);

   //Set width and outer margin     $ ("#main") to the outermost main element. Width (w*cols). CSS ("margin", "O Auto");
   //To store the height of the addition of all the block boxes in each column.

    var harr=[];     $boxs. Each (function (index, value) {        var h = $boxs. EQ (Ind
ex). Outerheight ();         if (Index < cols) {             harr[Index] = h; The NUM block box in the first row is added first into the array Harr        }else{             var MinH = Math.min.apply (null, HARR);//minimum value in array hArrMinH             var minhindex = $.inarray (MinH, HARR);             $ (value). css ({                 "position": "Absolute", "Top": minh+ "px" and "left":
Minhindex*w + "px"            });            //array minimum high element high + add display box [i] block height    
         harr[Minhindex] = = $boxs. EQ (index). Outerheight ()//update after adding a block box Liegau
       }    }); }

The idea here is to get the visual width of the browser first, then by dividing the width of each display box to figure out how many display boxes can be displayed, and then using an array Harr to maintain the height of each column, I use each of the methods in jquery to iterate over the height of each column, Here are two arguments passed in, index is the index number of the display box, and value is the jquery object for this display box.

First, the height of the corresponding display box is taken according to the index number. This height contains the full width of the margin and then saves the value in the array, and as the maximum number of blocks per row is obtained, a judgment is made here to fill the first row first and then start filling in 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, I get the column where the minimum value is, the first parameter is the minimum, the second is the array that needs to be judged, and then we fill in the corresponding display box, Finally, add the full height of the newly added display box to the array, and then continue to loop the judgment so that the new display box is constantly added.

So now we're going to come up with a new display box that's dynamically generated from the JSON data coming in the background, because each project is going to show a different content, I do not show the specific code here, the next step is to monitor the scroll bar to determine when to start dynamically add a new display box.

Next, I'll talk about my judgment, first of all, after the first set of the display box to get the last display box fill height, and then add the display frame of the height of the side, 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 if the current scroll bar scrolling distance is greater than the default height of the page plus the height of the last display box to the top of the screen, if greater than the description should continue to fill the display box:

Listens for scroll bar
window.onscroll=function () {
if (Checkscrollside ()) {
Addwaterfall
(dataint);        This is the dynamic filling of the new display box function
waterfall ();
};

//Determine if it is necessary to continue loading the waterfall flow
function checkscrollside () {
var $lastBox = $ ("#main >div"). Last ();
var Lastboxdis = $lastBox. Offset (). Top + Math.floor ($lastBox. Outerheight ()/2);
var scrolltop = $ (window). scrolltop ();
var documenth = $ (window). Height ();
Return (Lastboxdis<scrolltop+documenth) true:false;
}

Now the entire waterfall display is complete, recorded here today, stay in standby.