JS Waterfall Stream Code

<!doctype html>

<meta charset= "Utf-8" > <title>jquery Waterfall Flow Layout (detailed comments per line of code)-Liu Xiaofan </title>

<style type= "Text/css" >

Body, UL, Li, h3 {margin:0; padding:0; list-style:none; font:bold 12px "Microsoft Jas Black";}/* Waterfall Flow layout style */#lxf-box {Position:rel ative; } #lxf-box li {position:absolute; background: #fff; border:solid 1px #ccc; text-align:center; padding:10px; left:0px ; top:0; } h3 {padding-top:8px;} img {width:200px; height:auto; display:block; border:0}/*css3 Animation */li {-webkit-transitio N:all. 7s ease-out. 1s; -moz-transition:all. 7s Ease-out; -o-transition:all. 7s ease-out. 1s; Transition:all. 7s ease-out. 1s}

</style>

<script src= "Http://liuxiaofan.com/demo/js/jquery-1.6.4.min.js" type= "Text/javascript" ></script> < /head> <body> <ul id= "Lxf-box" >

<li><a href= "http://www.liuxiaofan.com/" ></a>

<li><a href= "http://www.liuxiaofan.com/" ></a>

<li><a href= "http://www.liuxiaofan.com/" ></a>

<li><a href= "http://www.liuxiaofan.com/" ></a>

<li><a href= "http://www.liuxiaofan.com/" ></a>

<li><a href= "http://www.liuxiaofan.com/" ></a>

<li><a href= "http://www.liuxiaofan.com/" ></a>

<li><a href= "http://www.liuxiaofan.com/" ></a>

<li><a href= "http://www.liuxiaofan.com/" ></a>

<li><a href= "http://www.liuxiaofan.com/" ></a>

<li><a href= "http://www.liuxiaofan.com/" ></a>

<li><a href= "http://www.liuxiaofan.com/" ></a>

<li><a href= "http://www.liuxiaofan.com/" ></a>

<li><a href= "http://www.liuxiaofan.com/" ></a>

<li><a href= "http://www.liuxiaofan.com/" ></a>

<li><a href= "http://www.liuxiaofan.com/" ></a>

</ul>

<script>/* 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 the Li   4. Put the next Li under the Li Liu Xiaofan blog address: [Url]http://liuxiaofan.com[/url] Write Time: June 9, 2012 */var margin = 10;//Here set the pitch var li=$ ("Li"); Here is the chunk name Var li_w = li[0].offsetwidth+margin;//The actual width of the chunk (including the spacing, here using the source offsetwidth function, not applicable to jquery width () function is because it cannot get the actual width, for example, there is pandding within the element) function Liuxiaofan () {//define a function to make it easy to call  var h=[];//record chunk height array  var n = document.documentelement.offsetwidth/li_w|0;//the width of the window divided by the width of the chunk is a row can put a few chunks  for (var i = 0;i < li.length;i++) {// How many Li loops how many times   li_h = li[i].offsetheight;//Gets the height of each Li   if (i < n) {//n is the most one-line Li, so less than N is the first row.    h[i]=li_h;//put each Li into the array    li.eq (i). CSS ("top", 0);//top value of the first line of Li is 0     li.eq (i). CSS ("left", I * li_w);//L-Li is the i*li width    }   else{    Min_h =math.min.apply (null,h);//Get the smallest value in the array, the    minkey = Getarraykey (H, Min_h) with the smallest height value in the chunk;//min.The value of the corresponding pointer    h[minkey] + = Li_h+margin;//Add new height after 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 it    li.eq (i). CSS ("left", Minkey * li_w);  //I-li is the width of I*li   }   $ ("H3"). EQ (i). Text ("Number:" +i+ ", Height:" +li_h);//write The block number and its height value into the corresponding chunk H3 header  }/* Use for The in operation returns the number of corresponding items of a value in the array (such as calculating the minimum height value is the first of the array) */function Getarraykey (s, v) {for (k in s) {if (s[k] = = v) {return k;}}/* This must be used onl Oad, because the picture does not load up does not know the height value */window.onload = function () {Liuxiaofan ();}; /* Also run function when browser window changes */window.onresize = function () {Liuxiaofan ();};

</script>

</body>

Transfer from http://bbs.blueidea.com/thread-3063753-1-1.html