avalonjs制作响应式瀑布流特效

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

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= 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) ;
});

html

  

    

      

  {{el.src}}
      
    
    

  

css

#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;
}

以上所述就是本文的全部内容了，希望大家能够喜欢。