Two ways to implement waterfall flow layouts using jquery and CSS3

JQ for waterfall flow picture positioning
1. jquery is another excellent JavaScript framework following prototype.

2, $ (window) width () of the browser window
Outerwidth () = Padding+border+width;
Width () = width
/* in jquery, the width () method is used to get the element width; the Innerwidth () method is used to obtain the width of the element including the inner boundary (padding), and the Outerwidth () method is used to obtain the include inner boundary (padding) and border (border) element width, the outer boundary (margin) is also included if the parameter of the Outerwidth () method is true, which is the width of the element including the outer border (margin), the inner boundary (padding), and the border (border). Similarly, the Innerheight method and the Outerheight method calculate the corresponding height in the same way.
So say: For the same element it should be: Width () <=innerwidth () <=outerwidth () <=outerwidth (TRUE); */

3, $.inarray (the element to be found, array) This method is used to get the index of the element

Functions for 4.jQuery traversal
Each $boxs. index,value {
}); Index index value, value corresponding to
5.eq (n), select the nth element from the result set

6.$.inarray (Value,arr) tool function, used to determine the index of a value in an array

The value of 7.each traversal is a DOM object. Convert a value DOM object to a jquery object to use its method: $ (value)
jquery's $.inarray () method directly can get a number in the array index
$ (DOM) converts a DOM object into a jquery object

$ (window). On ("Load", function () {
Waterfall ();
})
function Waterfall () {
var $boxs =$ ("#main >div");
var w= $boxs. EQ (0). Outerwidth ();
var Cols=math.floor ($ (window). Width ()/w);
$ ("#main"). Width (w*cols). CSS ("margin", "0 auto");
var harr=[];
$boxs. Each (function (index,value) {
var h= $boxs. EQ (index). Outerheight ();
if (index<cols) {
Harr[index]=h;
}else{
var minh=math.min.apply (Null,harr);
var minhindex=$.inarray (Minh,harr);
$ (value). css ({
"Position": "Absolute",
"Top": minh+ "px",
"Left": minhindex*w+ "px"
})
harr[minhindex]+= $boxs. EQ (index). Outerheight ();
}
})
}

"Principle" CSS3 multi-column Layout column
"Knowledge points"
①column browser compatibility issues, different kernels to write their prefixes
-webkit Google Chrome kernel
-ms IE
-O Open Gate Opera
-moz Firefox Firefox
②column-width and Column-count no need to be present at the same time
③column-rule to set the border between columns
④column-gap set the column spacing, not necessarily the number of definitions, the actual display of how much. Its calculation rule: divide the width of the current browser by the defined column width, the remaining distance is evenly distributed

"CSS3 and JS implementation method comparison"
--CSS3 Way--
1: No calculation required, the browser automatically calculate, just set 1 column width, high performance
2: The column width changes with the browser wide port size, the user experience is not good;
3: Picture sorting in vertical order, disrupting the order of picture display
4. Picture loading or need JS
--js Way--
JS implementation of the waterfall stream will not have the above shortcomings, but the performance is relatively poor!

/*alert ($ (window). Height ()); browser window Visibility Area height
Alert (document). Height ()); Height of window document in browser
Alert ($ (document.body). Height ());//browser Current window document body altitude
Alert ($ (document.body). Outerheight (True));//browser window The total height of the document body includes border padding margin
Alert ($ (window). width ()); Width of window viewable area in browser
Alert (document). width ());//browser window document for image width
Alert ($ (document.body). width ());//browser window The height of the document body
Alert ($ (document.body). Outerwidth (True));//browser window The total width of the document body includes border padding margin

Alert (document). ScrollTop ()); Gets the vertical height of the scroll bar to the top
Alert (document). ScrollLeft ()); Gets the vertical width of the scroll bar to the left */

Two ways to implement waterfall flow layouts using jquery and CSS3