avalonjs制作响应式瀑布流特效

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.onresize = debouncer( function ( e ) {    var windowWidth = avalon(window).width(), k = Math    .floor(windowWidth / 200), detect_left = avalon(    $('waterFallDetect')).offset().left;    if (Math.abs(detect_left) >= 199) {      waterfall.col_num = Math.floor(avalon(window).width()      / waterfall.col_width);      waterfall_model.img_list = [];      for ( var j = 0; j < waterfall.col_num; j++) {        waterfall_model.img_list.push([]);      }      waterfall.resizing=true;      waterfall.loaded_num =waterfall.init_num=0;      //waterfall.start=0;      waterfall.resize_item(0);    }  },30) ;});

<div id='wrap' ms-controller="waterfall">  <ul ms-each-els="img_list" id='wrap_row'>    <li ms-each-el="els" ms-attr-id='row{{$index}}'      data-each-rendered='rendered'>      <p>        <img          ms-src="http://cued.xunlei.com/demos/publ/img/P_{{el.src}}.jpg"          width='192' ms-attr-height='{{el.height}}'> <span>{{el.src}}</span>      </p>    </li>    <li id='waterFallDetect' ms-if='$last'></li>  </ul></div>

#wrap ul li {display: inline-block;*display: inline;zoom: 1;vertical-align: top;font-size: 16px;}#wrap ul li p {margin: 5px 2.5px;border: 1px solid red;min-width: 192px;min-height: 100px;}#wrap span {display: block;}#waterFallDetect {width: 192px;height: 100px;border: 1px solid red;}