Home > Developer > JavaScript
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> waterfall stream layout Code </title>
<Script type = "text/javascript" src = "js/jquery. js"> </script>
<Style type = "text/css">
Body, div, img, h1, h2, h3, h4, h5, h6 {padding: 0px; margin: 0px ;}
Img {border: none ;}
. Wrapper {width: 960px; margin: 0 auto ;}
# Con1_1 {position: relative ;}
# Con1_1. product_list {position: absolute; left: 0px; top: 0px; padding: 10px; background: # eee ;}
. Product_list img {width: 200px; display: block ;}
. Product_list h2 {padding: 5px 0px; font-size: 12px; text-align: center; color: #333 ;}
</Style>
</Head>
<Body>
<Div class = "wrapper">
<H3> This is the title part of the text <Div id = "con1_1">
<Div class = "product_list"> <a href = "#"> </a>
<H2> image height </Div>
<Div class = "product_list"> <a href = "#"> </a>
<H2> image height </Div>
<Div class = "product_list"> <a href = "#"> </a>
<H2> image height </Div>
<Div class = "product_list"> <a href = "#"> </a>
<H2> image height </Div>
<Div class = "product_list"> <a href = "#"> </a>
<H2> image height </Div>
<Div class = "product_list"> <a href = "#"> </a>
<H2> image height </Div>
<Div class = "product_list"> <a href = "#"> </a>
<H2> image height </Div>
<Div class = "product_list"> <a href = "#"> </a>
<H2> image height </Div>
</Div>
<H3> the position of this line of text is first calculated using js to calculate the height of the above content </Div>
</Body>
<Script type = "text/javascript">
/*
Principle: 1. Put all the li height values in the array
2. The top of the first row is 0.
3. Which li is the minimum value of the calculated height?
4. Put the next li under that li.
*/
Var margin = 10; // set the spacing.
Var li = $ (". product_list"); // block name
Var li_W = li [0]. offsetWidth + margin; // obtain the actual width of the block.
Function liuxiaofan (){
Var h = []; // record the array of block height
Var n= 960/li_W | 0;
For (var I = 0; I <li. length; I ++ ){
Li_H = li [I]. offsetHeight; // obtain the height of each li
If (I <n) {// n is the most li in a row, so less than n is the first line.
Max_H = Math. max. apply (null, h );
H [I] = li_H; // put each li in the array
Li.eq(i2.16.css ("top", 0); // The top value of Li in the first row is 0
Li.eq(i2.16.css ("left", I * li_W); // The left coordinate of the I-th li is the width of I * li
}
Else {
Min_H = Math. min. apply (null, h); // obtain the minimum value in the array and the one with the smallest height value in the block
MinKey = getarraykey (h, min_H); // pointer corresponding to the smallest value
H [minKey] + = li_H + margin; // The height value is updated after the new height is added.
Li.eq(i2.16.css ("top", min_H + margin); // first obtain the smallest Li, and then put the following li under it
Li.eq(i2.16.css ("left", minKey * li_W); // The left coordinate of the I-th li is the width of I * li
}
$ ("H2"). eq (I). text ("height:" + li_H); // write the block height value to the corresponding block H2 title.
}
Max = Math. max. apply (null, h );
$ ("# Con1_1" ).css ("height", max );
}
/* Use the for in operation to return the number of items corresponding to a value in the array (for example, the minimum height value is the number of items in the array )*/
Function getarraykey (s, v) {for (k in s) {if (s [k] = v) {return k ;}}}
/* Onload must be used here, because the image height value is unknown when it is not loaded */
Window. onload = function () {liuxiaofan ();};
Window. onresize = function () {liuxiaofan ();};
$ (Function (){
$ (". Product_list"). hover (function (){
((This).css ("background-color", "# ddd ");
}, Function (){
Certificate (this).css ("background-color", "# eee ");
});
});
</Script>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
