瀑布流的實現
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>瀑布流佈局</title>
6 <style type="text/css">
7 body{margin:0; font-family:微軟雅黑;}
8 #flow-box{margin:10px auto 0 auto; padding:0; position:relative}
9 #flow-box li{
10 width:190px; position:absolute; padding:10px; border:solid 1px #efefef; list-style:none;
11 opacity:0;
12 -moz-opacity:0;
13 filter:alpha(opacity=0);
14 -webkit-transition:opacity 500ms ease-in-out;
15 -moz-transition:opacity 500ms ease-in-out;
16 -o-transition:opaicty 500ms ease-in-out;
17 transition:opaicty 500ms ease-in-out;}
18 #flow-box li img{width:100%;}
19 #flow-box li a{display:block; width:100%; text-align:center; font-size:14px; color:#333; line-height:18px; margin-top:10px; text-decoration:none;}
20 .loadwrap{position:absolute; left:0; width:100%; text-align:center;}
21 </style>
22 </head>
23 <body>
24 <ul id="flow-box">
25 <li><img src="http://www.mitxiong.com/NewsImages/2012121821504156.jpg" /><a href="#">圖片標題1</a></li>
26 <li><img src="http://www.mitxiong.com/NewsImages/2012112718241731.jpg" /><a href="#">圖片標題2</a></li>
27 <li><img src="http://www.mitxiong.com/NewsImages/2012111806582944.jpg" /><a href="#">圖片標題3</a></li>
28 <li><img src="http://www.mitxiong.com/NewsImages/2012110907231232.jpg" /><a href="#">圖片標題4</a></li>
29 <li><img src="http://www.mitxiong.com/NewsImages/2012110406319529.jpg" /><a href="#">圖片標題5</a></li>
30 <li><img src="http://www.mitxiong.com/NewsImages/2012101808066955.jpg" /><a href="#">圖片標題6</a></li>
31 <li><img src="http://www.mitxiong.com/NewsImages/2012101307276582.jpg" /><a href="#">圖片標題7</a></li>
32 <li><img src="http://www.mitxiong.com/NewsImages/2012082223432719.jpg" /><a href="#">圖片標題8</a></li>
33 <li><img src="http://www.mitxiong.com/NewsImages/2012082121509065.jpg" /><a href="#">圖片標題9</a></li>
34 <li><img src="http://www.mitxiong.com/NewsImages/2012081922387254.jpg" /><a href="#">圖片標題10</a></li>
35 <li><img src="http://www.mitxiong.com/NewsImages/2012081700252403.jpg" /><a href="#">圖片標題11</a></li>
36 <li><img src="http://www.mitxiong.com/NewsImages/2012081407597304.jpg" /><a href="#">圖片標題12</a></li>
37 <li><img src="http://www.mitxiong.com/NewsImages/2012081218248259.jpg" /><a href="#">圖片標題13</a></li>
38 <li><img src="http://www.mitxiong.com/NewsImages/2012080621278799.jpg" /><a href="#">圖片標題14</a></li>
39 <li><img src="http://www.mitxiong.com/NewsImages/2012072907484455.jpg" /><a href="#">圖片標題15</a></li>
40 <li><img src="http://www.mitxiong.com/NewsImages/2012072521564314.jpg" /><a href="#">圖片標題16</a></li>
41 <li><img src="http://www.mitxiong.com/NewsImages/2012072507238259.jpg" /><a href="#">圖片標題17</a></li>
42 <li><img src="http://www.mitxiong.com/NewsImages/2012072409035684.jpg" /><a href="#">圖片標題18</a></li>
43 <li><img src="http://www.mitxiong.com/NewsImages/2012072219405236.jpg" /><a href="#">圖片標題19</a></li>
44 <li><img src="http://www.mitxiong.com/NewsImages/2012071218416980.jpg" /><a href="#">圖片標題20</a></li>
45 </ul>
46 <div id="loadimg" class="loadwrap"><img src="Images/load.jpg" /></div>
47 <script type="text/javascript">
48 function flow(mh, mv) {//參數mh和mv是定義數據塊之間的間距，mh是水平距離，mv是垂直距離
49 var w = document.documentElement.offsetWidth;//計算頁面寬度
50 var ul = document.getElementById("flow-box");
51 var li = ul.getElementsByTagName("li");
52 var iw = li[0].offsetWidth + mh;//計算數據塊的寬度
53 var c = Math.floor(w / iw);//計算列數
54 ul.style.width = iw * c - mh + "px";//設置ul的寬度至適合即可以利用css定義的margin把全部內容居中
55
56 var liLen = li.length;
57 var lenArr = [];
58 for (var i = 0; i < liLen; i++) {//遍歷每個數據塊將高度記入數組
59 lenArr.push(li[i].offsetHeight);
60 }
61
62 var oArr = [];
63 for (var i = 0; i < c; i++) {//把第一行排放好，並將每一列的高度記入數據oArr
64 li[i].style.top = "0";
65 li[i].style.left = iw * i + "px";
66 li[i].style.opacity = "1";
67 li[i].style["-moz-opacity"] = "1";
68 li[i].style["filter"] = "alpha(opacity=100)";
69 oArr.push(lenArr[i]);
70 }
71
72 for (var i = c; i < liLen; i++) {//將其餘數據塊定位到最短的一列後面，而後再更新該列的高度
73 var x = _getMinKey(oArr);//獲取最短的一列的索引值
74 li[i].style.top = oArr[x] + mv + "px";
75 li[i].style.left = iw * x + "px";
76 li[i].style.opacity = "1";
77 li[i].style["-moz-opacity"] = "1";
78 li[i].style["filter"] = "alpha(opacity=100)";
79 oArr[x] = lenArr[i] + oArr[x] + mv;//更新該列的高度
80 }
81 document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//將loading移到下面
82
83 function scroll() {//滾動加載數據
84 var st = oArr[_getMinKey(oArr)];
85 var scrollTop = document.documentElement.scrollTop > document.body.scrollTop? document.documentElement.scrollTop : document.body.scrollTop;
86 if (scrollTop >= st - document.documentElement.clientHeight) {
87 window.onscroll = null;//爲防止重複執行，先清除事件
88 _request(null, "GetList.php", function(data) {//當滾動到達最短的一列的距離時便發送ajax請求新的數據，而後執行回調函數
89 _addItem(data.d, function() {//追加數據
90 var liLenNew = li.length;
91 for(var i = liLen; i < liLenNew; i++) {
92 lenArr.push(li[i].offsetHeight);
93 }
94 for(var i = liLen; i < liLenNew; i++) {
95 var x = _getMinKey(oArr);
96 li[i].style.top = oArr[x] + 10 + "px";
97 li[i].style.left = iw * x + "px";
98 li[i].style.opacity = "1";
99 li[i].style["-moz-opacity"] = "1";
100 li[i].style["filter"] = "alpha(opacity=100)";
101 oArr[x] = lenArr[i] + oArr[x] + 10;
102 }
103 document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//loading向下移位
104 liLen = liLenNew;
105 window.onscroll = scroll;//執行完成，恢愎onscroll事件
106 });
107 })
108 }
109 }
110 window.onscroll =scroll;
111 }
112 //圖片加載完成後執行
113 window.onload = function() {flow(10, 10)};
114 //改變窗口大小時從新佈局
115 var re;
116 window.onresize = function() {
117 clearTimeout(re);
118 re = setTimeout(function() {flow(10, 10);}, 200);
119 }
120 //追加項
121 function _addItem(arr, callback) {
122 var _html = "";
123 var a = 0;
124 var l = arr.length;
125 (function loadimg() {
126 var img = new Image();
127 img.onload = function() {
128 a += 1;
129 if (a == l) {
130 for (var k in arr) {
131 var img = new Image();
132 img.src = arr[k].img;
133 _html += '<li><img src="' + arr[k].img + '" /><a href="#">' + arr[k].title + '</a></li>';
134 }
135 _appendhtml(document.getElementById("flow-box"), _html);
136 callback();
137 }
138 else {
139 loadimg();
140 }
141 }
142 img.src = arr[a].img;
143 })()
144 }
145 //ajax請求
146 function _request(reqdata, url, callback) {
147 var xmlhttp;
148 if (window.XMLHttpRequest) {
149 xmlhttp = new XMLHttpRequest();
150 }
151 else {
152 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
153 }
154 xmlhttp.onreadystatechange = function () {
155 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
156 var data = eval("(" + xmlhttp.responseText + ")");
157 callback(data);
158 }
159 }
160 xmlhttp.open("POST", url);
161 xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
162 xmlhttp.send(reqdata);
163 }
164 //追加html
165 function _appendhtml(parent, child) {
166 if (typeof (child) == "string") {
167 var div = document.createElement("div");
168 div.innerHTML = child;
169 var frag = document.createDocumentFragment();
170 (function() {
171 if (div.firstChild) {
172 frag.appendChild(div.firstChild);
173 arguments.callee();
174 }
175 else {
176 parent.appendChild(frag);
177 }
178 })();
179 }
180 else {
181 parent.appendChild(child);
182 }
183 }
184 //獲取數字數組的最大值
185 function _getMaxValue(arr) {
186 var a = arr[0];
187 for (var k in arr) {
188 if (arr[k] > a) {
189 a = arr[k];
190 }
191 }
192 return a;
193 }
194 //獲取數字數組最小值的索引
195 function _getMinKey(arr) {
196 var a = arr[0];
197 var b = 0;
198 for (var k in arr) {
199 if (arr[k] < a) {
200 a = arr[k];
201 b = k;
202 }
203 }
204 return b;
205 }
206 </script>
207 </body>
208 </html>
相關文章
- 1. Android瀑布流的實現
- 2. jQuery 實現的瀑布流
- 3. 實現瀑布流佈局
- 4. 圖片瀑布流實現
- 5. 瀑布流(UIScrollView實現)
- 6. vue實現瀑布流
- 7. JS實現瀑布流
- 8. IOS 瀑布流UICollectionView實現
- 9. Recycler實現瀑布流
- 10. ios實現瀑布流
- 更多相關文章...
- • 現實生活中的 XML - XML 教程
- • Hibernate實現增刪改查 - Hibernate教程
- • ☆基於Java Instrument的Agent實現
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Android瀑布流的實現
- 2. jQuery 實現的瀑布流
- 3. 實現瀑布流佈局
- 4. 圖片瀑布流實現
- 5. 瀑布流(UIScrollView實現)
- 6. vue實現瀑布流
- 7. JS實現瀑布流
- 8. IOS 瀑布流UICollectionView實現
- 9. Recycler實現瀑布流
- 10. ios實現瀑布流