Avalonjs mencipta kemahiran effect_javascript aliran air terjun responsif

Reka letak tidak berdasarkan apungan, dan juga bukan berdasarkan kedudukan mutlak. Lihat sahaja html dan css di bahagian bawah. Tiada sisipan html yang menjengkelkan, kodnya sangat menyegarkan

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&#63;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&#63;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) ;
});

html

<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 src="/static/imghwm/default1.png"  data-src="http://cued.xunlei.com/demos/publ/img/P_{{el.src}}.jpg"  class="lazy" 
          ms-
           style="max-width:90%" ms-attr-height='{{el.height}}'> <span>{{el.src}}</span>
      </p>
    </li>
    <li id='waterFallDetect' ms-if='$last'></li>
  </ul>
</div>

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

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.