avalonjs制作響應式瀑布流特效

 　　瀑布流主要應用在圖片展示頁面上。如果有一大批圖片需要展示，原始圖片尺寸不一致，又希望每張圖片都能不剪裁，完整顯示，那麼就要給圖片規定一個寬度，解放它們的高度。利用網頁高度不限這個特性，充分利用頁面的空間，盡可能的展示多的圖片。下面我們就來詳細探討下

　　布局不是基於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