AJAX+json+jquery實現預載入瀑布流佈局
程式碼片段(1)[全屏檢視所有程式碼]
1. [程式碼][JavaScript]程式碼 跳至 [1] [全屏預覽]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
<!doctype
html> <html> <head> <meta
charset= "utf-8" > <title>定寬Jquery+AJAX+JSON瀑布流佈局(每行程式碼都有詳細註釋)</title> <style
type= "text/css" > body,
ul, li, h3 { margin: 0; padding: 0; list-style: none; font: bold 12px "微軟雅黑" ;
} /*瀑布流佈局樣式*/ #lxf-box
{ position: relative; width: 1000px; margin:0 auto;} #lxf-box
li { background: #fff; border: solid 1px #ccc; text-align: center; padding: 10px; float: left;} h3
{ padding-top: 8px; } img
{ width: 200px; height: auto; display: block; border: 0 } /*css3動畫
注由於是css3製作的所以相容性不保證 要想相容性好 請自己做成gif動畫載入圖*/ /*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 }*/ #loading
{ display:none; line-height: 30px; background: #000; color:#fff; text-align: center; height: 30px; width: 100%; position:fixed; bottom:0; opacity:0.8;} </style> <script
src= "http://www.iiwnet.com/templets/niu/js/jquery.min.js"
type= "text/javascript" ></script> </head> <body> <h1
color= "red" >預覽無效果請重新整理</h1> <ul
id= "lxf-box" > <li><a
href= "http://www.iiwnet.com/div_css/342.html" ><img
src= "http://www.iiwnet.com/uploads/allimg/120814/1-120Q411544TX.jpg" ></a> <h3>圖片標題</h3> </li> <li><a
href= "http://www.iiwnet.com/ajax/237.html" ><img
src= "http://www.iiwnet.com/uploads/allimg/120801/1-120P1223013157.jpg" ></a> <h3>圖片標題</h3> </li> <li><a
href= "http://www.iiwnet.com/js_ad/271.html/" ><img
src= "http://www.iiwnet.com/uploads/allimg/120808/1-120PP00915a2.jpg" ></a> <h3>圖片標題</h3> </li> <li><a
href= "http://www.iiwnet.com/js_texiao/312.html/" ><img
src= "http://www.iiwnet.com/uploads/allimg/120812/1-120Q2150022G8.jpg" ></a> <h3>圖片標題</h3> </li> <li><a
href= "http://www.iiwnet.com/js_pic/191.html/" ><img
src= "http://www.iiwnet.com/uploads/allimg/120722/1-120H2144003129.jpg" ></a> <h3>圖片標題</h3> </li> <li><a
href= "http://www.iiwnet.com/js_pic/318.html/" ><img
src= "http://www.iiwnet.com/uploads/allimg/120812/1-120Q2161941b2.jpg" ></a> <h3>圖片標題</h3> </li> <li><a
href= "http://www.iiwnet.com/div_css/341.html/" ><img
src= "http://www.iiwnet.com/uploads/allimg/120814/1-120Q4113240U2.jpg" ></a> <h3>圖片標題</h3> </li> <li><a
href= "http://www.iiwnet.com/div_css/350.html/" ><img
src= "http://www.iiwnet.com/uploads/allimg/120814/125411K11-2.png" ></a> <h3>圖片標題</h3> </li> <li><a
href= "http://www.iiwnet.com/div_css/350.html/" ><img
src= "http://www.iiwnet.com/uploads/allimg/120814/1254113249-12.png" ></a> <h3>圖片標題</h3> </li> <li><a
href= "http://www.iiwnet.com/div_css/349.html/" ><img
src= "http://www.iiwnet.com/uploads/allimg/120814/12500a292-1.png" ></a> <h3>圖片標題</h3> </li> <li><a
href= "http://www.iiwnet.com/php_base/336.html/" ><img
src= "http://www.iiwnet.com/uploads/allimg/120813/1-120Q3145U0938.jpg" ></a> <h3>圖片標題</h3> </li> <li><a
href= "http://www.iiwnet.com/div_css/344.html/" ><img
src= "http://www.iiwnet.com/uploads/allimg/120814/12353B521-0.jpg" ></a> <h3>圖片標題</h3> </li> </ul> <div
id= "loading" >正在載入……</div> <script> /* 原理:1.把所有的li的高度值放到陣列裡面 2.第一行的top都為0 3.計算高度值最小的值是哪個li 4.把接下來的li放到那個li的下面 <a
href="http://iiwnet.com/js_web/">網頁特效程式碼</a>:http://iiwnet.com 編寫時間:2012年6月9日 */ function
iiwnet(){ //定義成函式便於呼叫 var
wrap = document.getElementById( "lxf-box" ) var
margin = 10; //這裡設定間距 var
li=$( "li" ); //這裡是區塊名稱 varli_W
= li[0].offsetWidth+margin; //取區塊的實際寬度(包含間距,這裡使用源生的offsetWidth函式,不適用jQuery的width()函式是因為它不能取得實際寬度,例如元素內有pandding就不行了) var
h=[]; //記錄區塊高度的陣列 li.css( "position" , "absolute" ); var
n = wrap.offsetWidth/li_W|0; //容器的寬度除以區塊寬度就是一行能放幾個區塊 for ( var
i = 0;i < li.length;i++) { //有多少個li就迴圈多少次 li_H
= li[i].offsetHeight; //獲取每個li的高度 if (i
< n) { //n是一行最多的li,所以小於n就是第一行了 h[i]=li_H; //把每個li放到陣列裡面 li.eq(i).css( "top" ,0); //第一行的Li的top值為0 li.eq(i).css( "left" ,i
* li_W); //第i個li的左座標就是i*li的寬度 } else { min_H
=Math.min.apply( null ,h)
; //取得陣列中的最小值,區塊中高度值最小的那個 minKey
= getarraykey(h, min_H); //最小的值對應的指標 h[minKey]
+= li_H+margin ; //加上新高度後更新高度值 li.eq(i).css( "top" ,min_H+margin); //先得到高度最小的Li,然後把接下來的li放到它的下面 li.eq(i).css( "left" ,minKey
* li_W); //第i個li的左座標就是i*li的寬度 } $( "h3" ).eq(i).text( "編號:" +i+ ",高度:" +li_H); //把區塊的序號和它的高度值寫入對應的區塊H3標題裡面 $( "li" ).animate({opacity:1}); } } /*
使用for in運算返回陣列中某一值的對應項數(比如算出最小的高度值是陣列裡面的第幾個) */ function
getarraykey(s, v) { for (k
in
s) { if (s[k]
== v) { return
k;}}} /*這裡一定要用onload,因為圖片不載入完就不知道高度值*/ window.onload
= function ()
{iiwnet();}; /*瀏覽器視窗改變時也執行函式*/ window.onresize
= function ()
{iiwnet();}; /**********************************************************************/ /*無限載入*/ var
i=1; function
getMore(){ $( "#loading" ).show(); var
json = "http://www.iiwnet.com/images/jstx/img.js" ; $.getJSON(json,
function (data){ $.each(data, function (i){ var
url=data[i].url; var
html= "<li
style='opacity:0'><a href='http://www.iiwnet.com/'><img src=" +url+ "
></a><h3>圖片標題</h3></li>" ; $( "#lxf-box" ).append(html); $( "#loading" ).hide(); }); iiwnet(); i=1 }); }; /*滾動到底部的時候*/ $(window).bind( "scroll" , function (){ if (
$(document).scrollTop() + $(window).height() > $(document).height() - 10 && i==1) { i=0; getMore(); } }); </script> </body> </html> |
相關文章
- jQuery實現瀑布流佈局jQuery
- 原生 js 實現瀑布流佈局、React 版本的瀑布流佈局元件JSReact元件
- Bootstrap實戰 - 瀑布流佈局boot
- flutter瀑布流佈局Flutter
- 談談實現瀑布流佈局的幾種思路
- 淺析瀑布流佈局原理
- CSS3實現瀑布流佈局(display: flex/column-coCSSS3Flex
- CSS3 column 瀑布流佈局CSSS3
- 原生js實現圖片瀑布流佈局,註釋超詳細JS
- vue實現瀑布流Vue
- css實現瀑布流CSS
- 卡片瀑布流實現
- 圖片預載入和懶載入(附上一個小demo瀑布流)
- 瀑布流簡單實現
- 小程式之圖片瀑布流(最全實現方式,額外加送懶載入)
- 網路直播平臺搭建,瀑布流佈局完美解決方案
- 記錄:瀑布流最佳實現方案
- 使用 yogaKit 實現一個資訊流佈局
- java:佈局方法(流佈局)Java
- 純CSS實現瀑布流,你會嗎?CSS
- 【瀑布流】
- 在鴻蒙中實現類似瀑布流效果鴻蒙
- 佈局總結-水平居中佈局的實現
- Activity 是如何載入佈局的?
- Grid 拖拽佈局實現
- 聖盃佈局進階版-flex佈局實現Flex
- CSS佈局–聖盃佈局和雙飛翼佈局以及使用Flex實現聖盃佈局CSSFlex
- 分散載入與記憶體佈局記憶體
- jQuery入門(六)jQuery實現瀑布分頁jQuery
- Material Design之RecyclerView基本講解與瀑布流的實現Material DesignView
- Flutter簡單實現手寫瀑布流 第二篇Flutter
- 微信小程式實戰,基於vue2實現瀑布流微信小程式Vue
- js使用waterfall橫向載入瀑布流,一行程式碼完成JS行程
- jquery製作圖片瀑布流點選按鈕載入更多內容jQuery
- 使用 CSS columns 佈局來實現自動分組佈局CSS
- css佈局-實現左中右佈局的5種方式CSS
- 淺談瀑布流
- 如何實現圖片預載入和載入進度條
- 瀑布 敏捷與現實敏捷