jquery Implementation Waterfall Flow layout _jquery

Html

Copy Code code as follows:

<div id= "Main" >
<div class= "box" >
<div class= "pic" >

</div>
</div>
<div class= "box" >
<div class= "pic" >

</div>
</div>
<div class= "box" >
<div class= "pic" >

</div>
</div>
<div class= "box" >
<div class= "pic" >

</div>
</div>
<div class= "box" >
<div class= "pic" >

</div>
</div>
<div class= "box" >
<div class= "pic" >

</div>
</div>
</div>

Css

Copy Code code as follows:

* {
margin:0;
padding:0;
}
#main {
position:relative;
}
. box {
padding:15px 0 0 15px;
Float:left;
}
. pic {
padding:10px;
border:1px solid #ccc;
border-radius:5px;
box-shadow:0px 0px 5px #ccc;
IMG {
width:165px;
Height:auto;
}
}

Javascript

Copy Code code as follows:

$ (window). On ("Load", function () {
Waterfall ();
var dataint = {"Data": [{"src": "7.jpg"},{"src": "8.jpg"},{"src": "9.jpg"},{"src": "6.jpg"}]}
Simulate JSON data;
$ (window). On ("Scroll", function () {
if (checkscrollslide) {
$.each (Dataint.data,function (key,value) {
var obox=$ ("<div>"). addclass ("box"). Appendto ($ ("#main"));
jquery supports consonant, implicit iterations;
var opic=$ ("<div>"). AddClass (' pic '). Appendto ($ (obox));
$ ("});
Waterfall ();
}
})
});
The main function of flow layout;
function Waterfall () {
var $boxs =$ ("#main >div");
Obtains the direct child element Div.box under the #main element;
Gets the width of each column;
var w= $boxs. EQ (0). Outerwidth ();
Outerwidth () Gets the width including padding and border;
var w= $boxs. EQ (0). width ();
Width () can only be used to get the widths defined for the element;
var Cols=math.floor ($ (window). Width ()/w);
How many columns to get;
$ ("#main"). Width (w*cols). CSS ("margin", "0 auto");
Sets the width and center style of the #main element;
var harr=[];
A set of heights of each column;
$boxs. Each (function (index,value) {
Traverse every box element;
To find the lowest point of all previous elements, then set this element below the lowest point;
var h= $boxs. EQ (index). Outerheight ();
The height of each box element,
if (index<cols) {
Harr[index]=h;
Determine the height of the first element in each column;
} else{
var minh=math.min.apply (Null,harr);
The minimum height in the column height array is obtained.
var minhindex=$.inarray (Minh,harr);
The $.inarray () method obtains the index value of the element (MinH) in the array (HARR);
Console.log (value);
The value at this time is the DOM object of all the box elements after the first line!;
$ (value). css ({
$ (value): Converts a DOM object into a jquery object to continue using the JQuery method;
"Position": "Absolute",
"Top": minh+ "px",
"Left": minhindex*w+ "px"
});
harr[minhindex]+= $boxs. EQ (index). Outerheight ();
The height of the lowest high element + the height of the element that has just been added to the lowest height = high of the new column;
};
});
Console.log (HARR);
};
function Checkscrollslide () {
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;
}

Explain in detail the detailed reference notes, I will not pull out alone to write.