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 条
38. var k = min &＃43; parseInt(Math.random()*(max-min));//随机指定范围的数
39. lst.push(k&＃43;".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&＃43;&＃43;){
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 &＃43;= '

['&＃43;dl[i]&＃43;']