码迷,mamicode.com
首页 > 其他好文 > 详细

瀑布流的实现

时间:2015-09-11 14:17:44      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

  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>

瀑布流的实现

标签:

原文地址:http://www.cnblogs.com/webreal/p/4800635.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!