1. <!doctype html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>Jquery瀑布流布局（每行代码都有详细注释）-作者：刘晓帆</title> 
  6. <style type="text/css"> 
  7. body, ul, li, h3 { margin: 0; padding: 0; list-style: none; font: bold 12px "微软雅黑"; } 
  8. /*瀑布流布局样式*/ 
  9. #lxf-box { position: relative; } 
  10. #lxf-box li { position: absolute; background: #fff; border: solid 1px #ccc; text-align: center; padding: 10px; left: 0px; top: 0; } 
  11. h3 { padding-top: 8px; } 
  12. img { width: 200px; height: auto; display: block; border: 0 } 
  13. /*css3动画*/ 
  14. li { -webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s } 
  15. </style> 
  16. <script src="http://liuxiaofan.com/demo/js/jquery-1.6.4.min.js" type="text/javascript"></script> 
  17. </head> 
  18. <body> 
  19. <ul id="lxf-box"> 
  20.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/OLqypfV.jpg"></a> 
  21.     <h3>图片标题</h3> 
  22.   </li> 
  23.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/msbvKWyQQzZuZy.jpg"></a> 
  24.     <h3>图片标题</h3> 
  25.   </li> 
  26.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/WbWXwqpcxqcued.jpg"></a> 
  27.     <h3>图片标题</h3> 
  28.   </li> 
  29.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/rabGVkIGq.jpg"></a> 
  30.     <h3>图片标题</h3> 
  31.   </li> 
  32.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/rSmEiZGlAvvuZ.jpg"></a> 
  33.     <h3>图片标题</h3> 
  34.   </li> 
  35.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/YewRtz.jpg"></a> 
  36.     <h3>图片标题</h3> 
  37.   </li> 
  38.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/STVDndiZsIduZyLv.jpg"></a> 
  39.     <h3>图片标题</h3> 
  40.   </li> 
  41.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/mWFuVrzCzpPdzdje.jpg"></a> 
  42.     <h3>图片标题</h3> 
  43.   </li> 
  44.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/MsZvAyOFukxdzdjefXwi.jpg"></a> 
  45.     <h3>图片标题</h3> 
  46.   </li> 
  47.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/OEycuedk.jpg"></a> 
  48.     <h3>图片标题</h3> 
  49.   </li> 
  50.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/YwabRquVKrxd.jpg"></a> 
  51.     <h3>图片标题</h3> 
  52.   </li> 
  53.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/+nwbuJpc.jpg"></a> 
  54.     <h3>图片标题</h3> 
  55.   </li> 
  56.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/qymffF.jpg"></a> 
  57.     <h3>图片标题</h3> 
  58.   </li> 
  59.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/DvKZdxCjtfqMv.jpg"></a> 
  60.     <h3>图片标题</h3> 
  61.   </li> 
  62.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/SOmyOQZtlUfdzdjefXwi.jpg"></a> 
  63.     <h3>图片标题</h3> 
  64.   </li> 
  65.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/REsUNXUvAkrdzdj.jpg"></a> 
  66.     <h3>图片标题</h3> 
  67.   </li> 
  68.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/DQJwrFnDpgtdz.jpg"></a> 
  69.     <h3>图片标题</h3> 
  70.   </li> 
  71.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/eJupzWlGPxz.jpg"></a> 
  72.     <h3>图片标题</h3> 
  73.   </li> 
  74.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/IWpjipjp.jpg"></a> 
  75.     <h3>图片标题</h3> 
  76.   </li> 
  77.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/OXsDgKacJeTdzdjefXwi.jpg"></a> 
  78.     <h3>图片标题</h3> 
  79.   </li> 
  80.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/QPIzxiMkmlHdzdjefX.jpg"></a> 
  81.     <h3>图片标题</h3> 
  82.   </li> 
  83.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/mrTNaJTaQyluZyLvvnWS.jpg"></a> 
  84.     <h3>图片标题</h3> 
  85.   </li> 
  86.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/mqXLNuWiPrbdz.jpg"></a> 
  87.     <h3>图片标题</h3> 
  88.   </li> 
  89.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/MiEJRJdimxPdzdjefXw.jpg"></a> 
  90.     <h3>图片标题</h3> 
  91.   </li> 
  92.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/CczowVxqM.jpg"></a> 
  93.     <h3>图片标题</h3> 
  94.   </li> 
  95.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/rabGVkIGq.jpg"></a> 
  96.     <h3>图片标题</h3> 
  97.   </li> 
  98.   <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/zwPqjasxHYvdz.jpg"></a> 
  99.     <h3>图片标题</h3> 
  100.   </li> 
  101. </ul> 
  102. <script> 
  103. /* 
  104. 原理：1.把所有的li的高度值放到数组里面 
  105. .第一行的top都为0 
  106. .计算高度值最小的值是哪个li 
  107. .把接下来的li放到那个li的下面 
  108. 作者：刘晓帆 
  109. 博客地址：[url]http://liuxiaofan.com[/url] 
  110. 编写时间：2012年6月9日 
  111. */ 
  112. var margin = 10;//这里设置间距 
  113. var li=$("li");//这里是区块名称 
  114. var    lili_W = li[0].offsetWidth+margin;//取区块的实际宽度（包含间距，这里使用源生的offsetWidth函数，不适用jQuery的width()函数是因为它不能取得实际宽度，例如元素内有pandding就不行了） 
  115. function liuxiaofan(){//定义成函数便于调用 
  116.     var h=[];//记录区块高度的数组 
  117.     var n = document.documentElement.offsetWidth/li_W|0;//窗口的宽度除以区块宽度就是一行能放几个区块 
  118.     for(var i = 0;i < li.length;i++) {//有多少个li就循环多少次 
  119.         lili_H = li[i].offsetHeight;//获取每个li的高度 
  120.         if(i < n) {//n是一行最多的li，所以小于n就是第一行了 
  121.             h[i]=li_H;//把每个li放到数组里面 
  122.             li.eq(i).css("top",0);//第一行的Li的top值为0 
  123.             li.eq(i).css("left",i * li_W);//第i个li的左坐标就是i*li的宽度 
  124.             } 
  125.         else{ 
  126.             min_H =Math.min.apply(null,h) ;//取得数组中的最小值，区块中高度值最小的那个 
  127.             minKey = getarraykey(h, min_H);//最小的值对应的指针 
  128.             h[minKey] += li_H+margin ;//加上新高度后更新高度值 
max_H =Math.max.apply(null,h) ;//取得数组中的最大值，区块中高度值最大的那个,用于设置ul的高度
  1.             li.eq(i).css("top",min_H+margin);//先得到高度最小的Li，然后把接下来的li放到它的下面 
  2.             li.eq(i).css("left",minKey * li_W);    //第i个li的左坐标就是i*li的宽度 
  3.         } 
  4.         $("h3").eq(i).text("编号："+i+"，高度："+li_H);//把区块的序号和它的高度值写入对应的区块H3标题里面 
  5.     } 
  6. //最后，设置 ul 的高度     $("#lxf-box").css("height", max_H);
  7. } 
  8. /* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */ 
  9. function getarraykey(s, v) {for(k in s) {if(s[k] == v) {return k;}}} 
  10. /*这里一定要用onload，因为图片不加载完就不知道高度值*/ 
  11. window.onload = function() {liuxiaofan();}; 
  12. /*浏览器窗口改变时也运行函数*/ 
  13. window.onresize = function() {liuxiaofan();}; 
  14. </script> 
  15. </body> 
  16. </html>