主要是看scroll()。在这里_addItem()和_requeat()是供scroll()调用的,而_appendhtml()是供_addItem()调用的。
这一步的整个过程是:当页面滚动到最短的一列数据的底部时就发出ajax请求加载新的数据,然后待数据中的图片全部load完后就追加到页面上,然后将这些数据项的高度写入到数组lenArr中,并对新加入的这些数据项进行定位,按照每一项都放在最短列的后面的规则而排放在适当的位置上,最后再将loading图片向下移到最底部的位置。
总结以上的整个思路,有4个地方值得一说:
1、缩放浏览器窗口时,onresize的触发很频繁,为降低性能损耗,需要待缩放结束后再执行重排,以上思路是使用setTimeout来处理。
2、页面滚动到最下面加载新数据的时候,只需对新数据排列。
3、以上思路中加载新数据要等图片都加载完成后才知道其高度,但实际项目中最好是服务器能给定高度值。
4、滚动触发加载新数据时,要避免事件多次触发,以上思路是将onscroll事件置为空,加载完成后再将事件恢复。
最后附上完整的代码:
flow.html
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