Jquery瀑布流佈局（每行代碼都有詳細註釋）

原創 wenb001 2018-09-11 03:54

 

  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> 

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Jquery

s5650326 2019-02-23 13:06:21

jQuery 元素搜索

liudajiang 2019-02-23 12:53:51

jquery 甘特圖開發指南

bokezyyx 2019-02-23 00:42:21

（JQuery學習筆記）利用jquery製作網頁導航定位

w1sw 2019-02-23 00:33:03

Jquery總結

kouxiaomou 2019-02-23 00:20:06

jquery筆記

00_yatou 2019-02-23 00:16:07

Ajax表單提交插件jquery form

網頁前端 2019-02-23 00:15:56

js 事件綁定的方法

tutu2 2019-02-23 00:14:28

jQuery和AJAX

tutu2 2019-02-23 00:14:28

jQuery中綁定事件的幾種方法

tutu2 2019-02-23 00:14:28

關於js中each的用法

勇敢的鑫 2019-02-23 00:13:24

巧妙使用JQuery Clone 添加多行數據，並更新到數據庫

good_ymr 2019-02-23 00:13:07

jquery 事件綁定

qyqx001 2019-02-23 00:11:25

jQuery各種獲取元素的方式效率比較

fcl961561322 2019-02-23 00:05:49

ASP.NET仿新浪微博下拉加載更多數據瀑布流效果

xiaopinzi 2019-02-23 00:01:44