JQuery implements waterfall stream layout _ jquery

In the previous article, we introduced how to use native javascript to achieve the effect of image waterfall streams. In this article, we will use jQuery to achieve the same effect. HTML

The Code is as follows:

CSS

The 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

The 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 = $ ("

"). AddClass (" box "). appendTo ($ (" # main "));
// JQuery supports concatenation and implicit iteration;
Var oPic = $ ("

"). AddClass ('pic '). appendTo ($ (oBox ));
$ (""). Attr ("src", "images/" + $ (value). attr ("src"). appendTo (oPic );
});
Waterfall ();
}
})
});
// Streaming layout main function;
Function waterfall (){
Var $ boxs = $ ("# main> p ");
// Obtain # The direct subelement p. box 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 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> p"). last ();
Var lastBoxDis = $ lastBox. offset (). top + Math. floor ($ lastBox. outerHeight ()/2 );
Var scrollTop = $ (window). scrollTop ();
Var implements enth = $ (window). height ();
Return (lastBoxDis }

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