5.2.2 让瀑布流动起来
打好基建之后，就须要写JavaScript代码。
首先假设数据不够显示一屏幕的情况，就用新数据来补足它，在补充的时候是依据4列中最矮的那一个为优先补充，由于高矮尺寸一般仅仅有在client才看得到，服务端尽管也能够计算。可是会非常浪费资源。client的内存和CPU能用则多用，仅仅要不让client变慢即可。
仅仅要图片高度不一致。通过这种思路非常快就能够看到一个“瀑布流”，这仅仅是静态的，一般滚动的时候瀑布流都会加入数据。所以接下来就是加入滚动事件，仅仅要有滚动就计算然后补充数据。
先看图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()方法绑定滚动栏事件的监听， 增加代码是这种：
eg.add(dl); //补充剩下的数据
eg.scroll(); //启动滚动栏监听注意：因为真实项目中。window.onscroll 事件可能会绑定多个业务，所以本例中的直接覆盖绑 定方式不宜直接拉入项目中去。要确保没有其它业务占用的情况下方可如此。否则可能会出现一些 意外情况，比方无法运行、某些事件被覆盖等等。 图片和文件放置在同一个文件夹，否则请改动对应的路径。
当可以用鼠标怎么也滚不究竟的时候，
恭喜你已实现经典的固定列宽瀑布流！最具士兵袭击实战类型的JavaScript
