On waterfall Flow

Waterfall flow, also known as waterfall Flow Layout, is a more popular form of Web page layout. Visual performance for the uneven multi-column layout, the earliest use of this layout is the site is Pinterest, after gradually popular in the country.

Waterfall Flow Layout Effect

That is, multiple lines, such as wide array of elements, followed by the elements are added to thereafter, equal width and so on, according to the original scale of the picture until the width of our requirements, followed by the rules into the specified location.

So what are the rules?
The following diagram is used to analyze the waterfall flow algorithm.

Schematic Waterfall flow algorithm

When the first row is filled with enough equal-width images (as in the case), it is natural to consider that the images placed below will be discharged below.

So where is the sixth picture placed? Is it a location?

We get through the Waterfall Flow algorithm experiment, and the position of the sixth image immediately following it should be the position.

Why is it?
Because the height of this column is the smallest in all columns before it is placed, it will be placed in this place.
So we know that if we keep putting it down, the seventh picture should be the position, right?

The position is correct by the Waterfall Flow algorithm experiment. Understanding this diagram should be able to understand the principle of waterfall flow algorithm.

JS Implementation Code

jquery is used here.

  varColCount//define the number of columns  varcolheightarry= []//Define column height arrays  varImgWidth = $ ('. Waterfall img '). Outerwidth (true)//width of single pictureColCount= parseint ($ ('. Waterfall '). Width ()/imgwidth)//Calculate the number of dequeue for(vari = 0; i < ColCount; i + +) {Colheightarry[i]= 0  }  //[0,0,0]  $('. Waterfall img '). On (' Load ',function(){      varMinValue = colheightarry[0]//define the minimum height    varMinindex = 0//Subscript for defining the minimum height     for(vari = 0; i < ColCount; i + +){      if(Colheightarry[i] < MinValue) {//if the value in the minimum height group number is less than the minimum valueMinValue = Colheightarry[i]//so the value in the minimum height array is the true minimum valueMinindex = i//The minimum subscript is the current subscript      }    }    $( This). css ({left:minindex*imgwidth, Top:minvalue}) Colheightarry[minindex]+= $( This). Outerheight (true)  })  //when the window size is reset, re-execute$ (window). On (' Resize ',function() {reset ()})//when the window is loaded, perform the waterfall stream$ (window). On (' Load ',function() {reset ()})//defining the Reset function  functionReset () {varcolheightarry=[] ColCount= parseint ($ ('. Waterfall '). Width ()/imgwidth) for(vari = 0; i < ColCount; i + +) {Colheightarry[i]= 0    }    $('. Waterfall img '). each (function(){      varMinValue = colheightarry[0]      varMinindex = 0 for(vari = 0; i < ColCount; i + +){        if(Colheightarry[i] <minValue) {MinValue=Colheightarry[i] Minindex=i}} $ ( This). css ({left:minindex*imgwidth, Top:minvalue}) Colheightarry[minindex]+= $( This). Outerheight (true)    })  }

View Code

Demo Demos

Waterfall Flow Demo Effect

Summarize Waterfall Flow Layout principle

• Set Picture width consistent
• The list is calculated according to the width of the browser and the width of each column by default 0
• When the picture is loaded, all the pictures are placed below the minimum number of columns
• Parent container height takes the maximum value of the list array

Actual combat related

Waterfall Stream + Lazy loading implement news station