Lifting waterfall Flow layout presumably, we are not strangers, actually? The principle is just like that, here is a small example to share with you the
Code 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 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:0 px 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 textTitle Section </h3> <div id= "con1_1" > <div class= "product_list" > <a href= "#" ><img src= " Images/img1.jpg "></a> <h2> picture height </h2> </div> <div class=" product_ List "> <a href=" # "><img src=" images/img2.jpg "></a> <h2> picture height </h2> </ div> <div class= "product_list" > <a href= "#" ><img src= "Images/img3.jpg" ></a> <h2> picture height </h2> </div> <div class= "product_list" > <a href= "#" ><img src= " Images/img4.jpg "></a> <h2> picture height </h2> </div> <div class=" product_ List "> <a href=" # "><img src=" images/img5.jpg "></a> <h2> picture height </h2> </ div> <div class= "product_list" > <a href= "#" ><img src= "Images/img6.jpg" ></a> <h2> picture height </h2> </div> <div class= "Product_list" > <a href= "#" ><img src= "images/img7.jpg" ></a> <h2> picture height </h2> </div> <div class= "product_list" > <a href= "#" ><img src= "images/img8.jpg" ></a> <h2 > Picture height </h2> </div> </div> <h3> The position of this line of text first to use JS to calculate the height of the above content of the </h3> </div> </body> <script type= "Text/javascript" > /* Principle: 1. Put all the Li's height values into the array 2. The top of the first row is 0 3. The value that calculates the minimum height value is which li 4. Put the next Li under that Li */ var margin = 10;//set spacing var li=$ (". Product_list");/block name var li_w = li[0].offsetwidth+margin;//Take block actual width function Liuxiaofan () { var h=[];//record block height array var n = 960/li_w|0; for (var i = 0;i < li.length;i++) { Li_h = li[i].offsetheight;//Gets the height of each Li if (i < n) {//n is the largest line of Li, so less than N is the first line Max_h =math.max.apply (null,h); h[i]=li_h;//each Li into an array li.eq (i). CSS ("top", 0);//The top value of Li in the first row is 0 li.eq (i). CSS ("LefT ", I * li_w);//The left coordinate of the first Li is i*li width } else{ min_h =math.min.apply (null,h); the smallest value in the array, the one with the lowest height value in the block. Minkey = Getarraykey (h, Min_h),//min value corresponding to the pointer H[minkey] + = li_h+margin;//plus new height update height value LI.EQ (i). CSS ("Top ", Min_h+margin)//First get the height of the smallest Li, and then put the next Li under its li.eq (i). CSS (" left ", Minkey * li_w); The left coordinate of the first I Li is the width of the 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 entries for a value in the array ( For example, to calculate the minimum height value is the number of the array inside the */ function Getarraykey (s, v) {for (k in s) {if (s[k] = v) {return k;}}} /* You must use onload here, because the picture does not finish loading, do not know the height value */ window.onload = function () {Liuxiaofan ();}; window.onresize = function () {Liuxiaofan ();}; $ (function () { $ (". Product_list"). Hover (function () { $ (this). CSS ("Background-color", "#ddd"); },function () { $ (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
