4、继续用绝对定位将其他数据块定位在最短的一列的位置之后然后更新该列的高度。
1 <script type="text/javascript">
2 function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离
3 //... 省略上一步的部份代码 ...
17 for (var i = 0; i < c; i++) {//把第一行排放好，并将每一列的高度记入数据oArr
18 li[i].style.top = "0";
19 li[i].style.left = iw * i + "px";
20 li[i].style.opacity = "1";
21 li[i].style["-moz-opacity"] = "1";
22 li[i].style["filter"] = "alpha(opacity=100)";
23 oArr.push(lenArr[i]);
24 }
25
26 for (var i = c; i < liLen; i++) {//将其他数据块定位到最短的一列后面，然后再更新该列的高度
27 var x = _getMinKey(oArr);//获取最短的一列的索引值
28 li[i].style.top = oArr[x] + mv + "px";
29 li[i].style.left = iw * x + "px";
30 li[i].style.opacity = "1";
31 li[i].style["-moz-opacity"] = "1";
32 li[i].style["filter"] = "alpha(opacity=100)";
33 oArr[x] = lenArr[i] + oArr[x] + mv;//更新该列的高度
34 }
35 document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//将loading移到下面
36 }
37 //图片加载完成后执行
38 window.onload = function() {flow(10, 10)};
39 //获取数字数组的最大值
40 function _getMaxValue(arr) {
41 //... 省略部份代码 ...
48 }
49 //获取数字数组最小值的索引
50 function _getMinKey(arr) {
51 var a = arr[0];
52 var b = 0;
53 for (var k in arr) {
54 if (arr[k] < a) {
55 a = arr[k];
56 b = k;
57 }
58 }
59 return b;
60 }
61 script>
到这一步可以到浏览器里面再看一次效果，可以说整个瀑布流的雏形都出来了：
5、当浏览器窗口大小改变时，重新执行一次上面1-4步以重新排放
这一步操作起来也相当便捷，在改变窗口大小时，再执行一次flow方法即可
1 <script type="text/javascript">
2 function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离
3 //... 省略部份代码 ...
37 //图片加载完成后执行
38 window.onload = function() {flow(10, 10)};
39 //改变窗口大小时重新布局
40 var re;
41 window.onresize = function() {
42 clearTimeout(re);
43 re = setTimeout(function() {flow(10, 10);}, 200);
44 }
45 //获取数字数组的最大值
46 function _getMaxValue(arr) {
47 //... 省略部份代码 ...
54 }
55 //获取数字数组最小值的索引
56 function _getMinKey(arr) {
57 //... 省略部分代码 ...
66 }
67 script>
这里值得注意的便是setTimeout，由于onresize的触发频率非常高，用setTimout设定一个间隔时间可以减低flow方法的执行频率，降低性能损耗。
6、滚动条滚动到底部时加载新的数据进来后也是定位在最短的一列的位置之后然后更新该列的高度。
1 <script type="text/javascript">
2 function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离
3 //... 省略部份代码 ...
35 document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//将loading移到下面
36
37 function scroll() {//滚动加载数据
38 var st = oArr[_getMinKey(oArr)];
39 var scrollTop = document.documentElement.scrollTop > document.body.scrollTop? document.documentElement.scrollTop : document.body.scrollTop;
40 if (scrollTop >= st - document.documentElement.clientHeight) {
41 window.onscroll = null;//为防止重复执行，先清除事件
42 _request(null, "GetList.php", function(data) {//当滚动到达最短的一列的距离时便发送ajax请求新的数据，然后执行回调函数
43 _addItem(data.d, function() {//追加数据
44 var liLenNew = li.length;
45 for(var i = liLen; i < liLenNew; i++) {
46 lenArr.push(li[i].offsetHeight);
47 }
48 for(var i = liLen; i < liLenNew; i++) {
49 var x = _getMinKey(oArr);
50 li[i].style.top = oArr[x] + 10 + "px";
51 li[i].style.left = iw * x + "px";
52 li[i].style.opacity = "1";
53 li[i].style["-moz-opacity"] = "1";
54 li[i].style["filter"] = "alpha(opacity=100)";
55 oArr[x] = lenArr[i] + oArr[x] + 10;
56 }
57 document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//loading向下移位
58 liLen = liLenNew;
59 window.onscroll = scroll;//执行完成，恢愎onscroll事件
60 });
61 })
62 }
63 }
64 window.onscroll =scroll;
65 }
66 //图片加载完成后执行
67 window.onload = function() {flow(10, 10)};
68 //... 省略部份代码 ...
74 //追加项
75 function _addItem(arr, callback) {
76 var _html = "";
77 var a = 0;
78 var l = arr.length;
79 (function loadimg() {
80 var img = new Image();
81 img.onload = function() {
82 a += 1;
83 if (a == l) {
84 for (var k in arr) {
85 var img = new Image();
86 img.src = arr[k].img;
87 _html += '- <img src="http://www.html5cn.org/%3C/span%3E%3Cspan%20style=" background-color:="" #f5f5f5"="" style="word-wrap: break-word; max-width: 620px;">' + arr[k].img + '" />' + arr[k].title + '';
88 }
89 _appendhtml(document.getElementById("flow-box"), _html);
90 callback();
91 }
92 else {
93 loadimg();
94 }
95 }
96 img.src = arr[a].img;
97 })()
98 }
99 //ajax请求
100 function _request(reqdata, url, callback) {
101 var xmlhttp;
102 if (window.XMLHttpRequest) {
103 xmlhttp = new XMLHttpRequest();
104 }
105 else {
106 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
107 }
108 xmlhttp.onreadystatechange = function () {
109 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
110 var data = eval("(" + xmlhttp.responseText + ")");
111 callback(data);
112 }
113 }
114 xmlhttp.open("POST", url);
115 xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
116 xmlhttp.send(reqdata);
117 }
118 //追加html
119 function _appendhtml(parent, child) {
120 if (typeof (child) == "string") {
121 var div = document.createElement("div");
122 div.innerHTML = child;
123 var frag = document.createDocumentFragment();
124 (function() {
125 if (div.firstChild) {
126 frag.appendChild(div.firstChild);
127 arguments.callee();
128 }
129 else {
130 parent.appendChild(frag);
131 }
132 })();
133 }
134 else {
135 parent.appendChild(child);
136 }
137 }
138 //获取数字数组的最大值
139 function _getMaxValue(arr) {
140 //... 省略部份代码 ...
147 } 148 //获取数字数组最小值的索引 149 function _getMinKey(arr) { 150 //... 省略部份代码 ...
159 } 160 script>
这一步涉及的代码比较多，简单概括其实就是多了几个方法：scroll()、_addItem()、_request()、_appendhtml()。
613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
