javaScript、jQuery、HTML5、Node.js实例大全-读书笔记4

5.2.2 让瀑布流动起来

打好基建之后，就需要写Javascript代码。首先如果数据不够显示一屏幕的情况，就用新数据来补足它，在补充的时候是根据4列中最矮的那一个为优先补充，因为高矮尺寸一般只有在客户端才看得到，服务端虽然也可以计算，但是会很浪费资源，客户端的内存和CPU能用则多用，只要不让客户端变慢就行。

只要图片高度不一致，通过这样的思路很快就可以看到一个“瀑布流”，这仅仅是静态的，一般滚动的时候瀑布流都会添加数据，所以接下来就是添加滚动事件，只要有滚动就计算然后补充数据。

先看图5-5的效果。

在网上收集了一些固定宽度不固定高度的图片，简单设置了一下页面的样式，在实际项目中外观样式设置可能更加复杂一些，本书重点研讨JavaScript，所以还是先看看其实现代码【范例5-2】。

35. eg.getDataList = function(min,max){//模端提供拟构造数据，实际上这些数据由后36. var lst = [],n=8;//保存数据37. for(var i=0;i<n;i++){//每次模拟 n 条38. var k = min + parseInt(Math.random()*(max-min));//随机指定范围的数39. lst.push(k+".jpg");//拼接成字符串40. } 41. return lst;//返回数组42. }; 43. eg.cols = eg.getElementsByClassName("col");//把目标对象缓存起来44. eg.colh = [0,0,0,0];//存取每列的高度45. eg.getColMin = function(){//计算 4 列高度46. var min = 0,m = {};47. for(var i=0;i<4;i++){48. min = parseInt(eg.cols[i].offsetHeight);49. eg.colh[i] = min;50. m[min] = i;51. } 52. return eg.cols[m[Math.min.apply(Array,eg.colh)]||0];//返回最小高度的对象53. } //追加数据的方法54. eg.add = function(dl){55. for(var i in dl){56. var newDiv = document.createElement("div")57. var newImg = document.createElement("img");58. newImg.src = dl[i];59. newDiv.appendChild(newImg);60. newDiv.innerHTML += '<p>['+dl[i]+']</p>';61. eg.getColMin().appendChild(newDiv);//追加到最小高度列里62. } 63. }; 64. eg.scroll = function(){//滚动条事件处理65. window.onscroll = function(){//onscroll,onload,onresize 只能这样添加66. var doc = document;67. var top = doc.documentElement.scrollTop || doc.body.scrollTop;//滚动条到顶部的高度68. var winH = doc.documentElement.clientHeight||doc.body.clientHeight;//可视窗口的高度69. if(Math.min.apply(Array,eg.colh) < top+winH){ //如果最小高度小于可视区域，就补充70. eg.add(eg.getDataList(1,35));//随机获取数据，并追加到最 后71. }72. }73. }

上面代码中的 eg.getElementsByClassName()方法是之前定义过的一个方法，存放在 base.js 文件 中，通过【范例 5-1】可知，默认数据很少，需要在初始化的时候补充一些，这就要在 HTML 页面增加一个 script 标签，先调用 eg.getColMin()获取已经存在的数据高度并保存到 eg.colh 数组中以便后面判断使用，然后调用 eg.getDataList()方法模拟一批数据，正规项目中会用 Ajax 去服务端请求， 然后把数据用 eg.add()方法追加到后面。最后还要调用一下 eg.scroll()方法绑定滚动条事件的监听， 加入代码是这样的：

<script>eg.getColMin();//计算第一批数据的高度var dl = eg.getDataList(5,35);              //初始化一些数据

eg.add(dl);                                 //补充剩下的数据

eg.scroll();                               //启动滚动条监听</script>

注意：由于真实项目中，window.onscroll 事件可能会绑定多个业务，所以本例中的直接覆盖绑 定方式不宜直接拉入项目中去，要确保没有其他业务占用的情况下方可如此，否则可能会出现一些 意外情况，比如无法执行、某些事件被覆盖等等。图片和文件放置在同一个目录，否则请修改相应的路径。当能够用鼠标怎么也滚不到底的时候，恭喜你已实现经典的固定列宽瀑布流！

最具士兵突击实战类型的JavaScript