JQuery implements waterfall stream layout and jquery waterfall Layout

JQuery implements waterfall stream layout and jquery waterfall Layout

HTML

Copy codeThe Code is 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 codeThe Code is 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 codeThe Code is 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 concatenation and implicit iteration;
Var oPic = $ ("<div>"). addClass ('pic '). appendTo ($ (oBox ));
$ ("});
Waterfall ();
}
})
});
// Streaming layout main function;
Function waterfall (){
Var $ boxs = $ ("# main> div ");
// Obtain # div. box, the direct sub-element under the main element;
// Obtain the width of each column;
Var w = $ boxs. eq (0). outerWidth ();
// OuterWidth () is used to obtain the width including padding and border;
// Var w = $ boxs. eq (0). width ();
// Width () can only get the width defined for the element;
Var cols = Math. floor ($ (window). width ()/w );
// Obtain the number of columns;
$ ("# Main"). width (w * cols).css ("margin", "0 auto ");
// Set # width and Center style of the main element;
Var hArr = [];
// A set of heights for each column;
$ Boxs. each (function (index, value ){
// Traverse every box element;
// In order to find the lowest point of all previous elements, set this element to 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 );
// Obtain the minimum height in the array of column height;
Var minHIndex = $. inArray (minH, hArr );
// $. InArray () method to obtain the index value of the element (minH) in the array (hArr;
// Console. log (value );
// At this time, the value is the DOM object of all the box elements after the first line !;
Detail (value).css ({
// $ (Value): convert a DOM object to a jQuery object to continue using the jQuery method;
"Position": "absolute ",
"Top": minH + "px ",
"Left": minHIndex * w + "px"
});
HArr [minHIndex] + = $ boxs. eq (index). outerHeight ();
// Height of the lowest height element + height of the element just added to the lowest height = new column height;
};
});
// 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 implements enth = $ (window). height ();
Return (lastBoxDis <scrollTop + incluenth )? True: false;
}

For detailed explanation, please refer to the notes carefully. I will not pull them out again.