瀑布流主要应用在图片展示页面上。如果有一大批图片需要展示，原始图片尺寸不一致，又希望每张图片都能不剪裁，完整显示，那么就要给图片规定一个宽度，解放它们的高度。利用网页高度不限这个特性，充分利用页面的空间，尽可能的展示多的图片。下面我们就来详细探讨下

　　布局不是基于float，也不是基于绝对定位，看最下面的html,css就知道了。也没有满篇烦人的html插入，代码很清爽

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 function getIndex(index) { if (index < 10) { index = "00" + index; } else if (index < 100) { index = "0" + index; } return index; } var $ = function(id) { return document.getElementById(id); }; require([ "avalon-min" ], function(avalon) { var waterfall = { load_items : null, loaded_items:[], col_num : 0,// 列数 waterfall_model : null, col_width : 200, loaded_num : 0, init_num : 0, loading : false, start:0, resizing:false, find_shortest_col : function() { // 找出最小高度的列 var a = avalon($('row0')).height(), min_i = 0; for ( var i = 1; i < this.col_num; i++) { var b = avalon($('row' + i)).height(); if (b < a) { min_i = i; a = b; } } return min_i; }, init : function(data) { this.load_items = data; this.loaded_items=this.loaded_items.concat(data); this.waterfall_model = waterfall_model; this.col_num = Math.floor(avalon(window).width() / this.col_width); this.init_num = this.col_num; for ( var j = 0; j < this.col_num; j++) { waterfall_model.img_list.push([]); } for ( var j = 0; j < this.col_num; j++) { // 第一行图片 var a={}; a.src=getIndex(data[j].src); a.height=data[j].height; a.text=data[j].text; waterfall_model.img_list[j].push(a); } this.start=this.col_num; }, add_item : function(i) { var a = this.find_shortest_col(); var b={}; var c=this.load_items[this.init_num+i]; if(c){ b.src=getIndex(c.src); b.height=c.height; b.text=c.text; waterfall_model.img_list[a].push(b); } }, resize_item:function(i){ //console.log(i); var a = this.find_shortest_col(); var b={}; var c=this.loaded_items[this.init_num+i]; if(c){ b.src=getIndex(c.src); b.height=c.height; b.text=c.text; waterfall_model.img_list[a].push(b); } } }; var waterfall_model = avalon.define("waterfall",function(vm) {// vm vm.img_list = []; vm.rendered = function() {// 每次图片加载渲染后执行   if(waterfall.resizing){ if (waterfall.loaded_num+ waterfall.init_num<waterfall.loaded_items.length){ waterfall.loaded_num++; waterfall.resize_item(waterfall.loaded_num); //waterfall.start++; } }else{   if (waterfall.loaded_num + waterfall.init_num <waterfall.load_items.length){ waterfall.loaded_num++; waterfall.add_item(waterfall.loaded_num); waterfall.start++; } } }; }); avalon.config({ debug:false }); avalon.scan(); function debouncer( func , timeout ) { var timeoutID , timeout = timeout || 200; return function () { var scope = this , args = arguments; clearTimeout( timeoutID ); timeoutID = setTimeout( function () { func.apply( scope , Array.prototype.slice.call( args ) ); } , timeout ); } } avalon.post("http://localhost/css/test.php?start=0", function(data) { // 加载第一次 waterfall.init(data); }, "json"); window.onscroll =debouncer( function ( e ) { var scrollTop = avalon(window).scrollTop(), windowHeight = avalon( window).height(), documentHeight = avalon(document).height(); if (windowHeight + scrollTop==documentHeight) { avalon.post("http://localhost/css/test.php?start="+(waterfall.start), function(data) { // 加载第一次 waterfall.resizing=false; waterfall.load_items=data; waterfall.loaded_items=waterfall.loaded_items.concat(data); waterfall.loaded_num =waterfall.init_num=0; waterfall.add_item(0); }, "json"); } }); window.o