JavaScript Waterfall Stream

Wow, waterfall flow, yes, good, good, really good, very funny look, so I want to play Ah, come on, just play.

Gradually, I use the native JS code to write. In order to facilitate everyone to run the code, I have all the style and CSS are written in the HTML, of course, also need pictures, I will pack.

to the code.

Direct code

<! DOCTYPE html>
Analysis:
1. The core is the waterfall method, which calculates the offsetwith of the current container, the width of the defined unit element, and the defined margin to calculate the number of columns, and then through the current index
2. Mincolumnindex to calculate the current height of the smallest column, and then take the height of the column has been stored as the top value, with the index * unit element width + margin as the left value
3. Head definition Media query, when initialized, automatic adjustment, of course, in the resize can be dynamically recalculated, I did not do so
4. Set several values for 1300,100, 900, 600 to click Test.
SOURCE Download:
Http://files.cnblogs.com/files/mouse_in_beijing/PB.zip
JavaScript Waterfall Stream