Avalon JS do a responsive waterfall stream

Function getindex (Index)  {if  (index < 10)  {index =  "XX"  +  index;}  else if  (index < 100)  {index =  "0" &NBSP;+&NBSP;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,//  Number of columns Waterfall_model : null,col_width  : 200,loaded_num : 0,init_num : 0,loading : false,start:0,resizing: False,find_shortest_col : function ()  {//  Find the minimum height of the column 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&Nbsp;= 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++)  { //  First line picture 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)  {// vmvm.img_list =  [];vm.rendered = function ()  {//  perform if (waterfall.resizing) {if  after each picture load rendering ( 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)  {//   Load First 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)  {//  Load first time 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> <span>{{el.src}}</span ></p></li><li id= ' waterfalldetect ' ms-if= ' $last ' ></li></ul></div>

Effect:

Http://pan.baidu.com/s/1dDisF9B

The picture is big 5m, must wait a little more

Thanks for the picture support of Thunderbolt ued

Masaki Https://github.com/RubyLouvre/avalon 's Avalon MVVC is really powerful .

This article from "CONDOM11" blog, declined reprint!

Avalon JS do a responsive waterfall stream