Recently, we have encountered a page that uses waterfall stream layout. Below is the effect of using a plug-in:
The width of each module is the same, but the height is not fixed.
<Div class = "wraplist">
<Div class = "box"> </div>
</Div>
<Script type = "text/javascript" src = "js/flow01.js"> </script>
<Script type = "text/javascript" src = "js/flow02.js"> </script>
The two js files are referenced, and wraplist is referenced in the module. The two classes of box are OK.
Next we will introduce a stream layout method for displaying images:
The specific HTML, css, and js code is as follows:
| The code is as follows: |
Copy code |
<! DOCTYPE html>
<Html lang = "zh-CN">
<Head>
<Meta charset = "UTF-8">
<Meta name = "keywords" content = "">
<Meta name = "description" content = "">
<Meta name = "renderer" content = "webkit">
<Meta http-equiv = "X-UA-Compatible" content = "IE = Edge">
<Meta name = "viewport" content = "user-scalable = no, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, width = device-width ">
<Title> html/css </title>
<Link rel = "icon" type = "image/x-icon" href = ""/>
<Link rel = "stylesheet" href = "css/common.css? V = 2015111110 ">
<Style>
*{
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;
}
</Style>
</Head>
<Body>
<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>
<Script src = "js/jquery-1.7.2.min.js"> </script>
<Script src = "js/jquery-2.1.4.min.js"> </script>
<Script src = "js/common. js"> </script>
<Script type = "text/javascript">
$ (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 ));
$ (""). attr ("src", "images/" + $ (value). attr ("src"). appendTo (oPic );
});
Waterfall ();
}
})
});
// Streaming layout main function;
Function waterfall (){
// Obtain # div. box, the direct sub-element under the main element;
Var $ boxs = $ ("# main> div ");
// Obtain the width of each column;
// 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 w = $ boxs. eq (0). outerWidth ();
// Obtain the number of columns;
Var cols = Math. floor ($ (window). width ()/w );
// Set # width and center style of the main element;
$ ("# Main"). width (w * cols).css ("margin", "0 auto ");
// A set of heights for each column;
Var hArr = [];
// Traverse every box element;
$ Boxs. each (function (index, value ){
// 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;
}
</Script>
</Body>
</Html> |
