avalon js做的响应式瀑布流

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

 1 <div id=‘wrap‘ ms-controller="waterfall">
 2     <ul ms-each-els="img_list" id=‘wrap_row‘>
 3         <li ms-each-el="els" ms-attr-id=‘row{{$index}}‘
 4             data-each-rendered=‘rendered‘>
 5             <p>
 6                 <img
 7                     ms-src="http://cued.xunlei.com/demos/publ/img/P_{{el.src}}.jpg"
 8                     width=‘192‘ ms-attr-height=‘{{el.height}}‘> <span>{{el.src}}</span>
 9             </p>
10         </li>
11         <li id=‘waterFallDetect‘ ms-if=‘$last‘></li>
12     </ul>
13 </div>