avalonjs响应式瀑布流

avalonjs响应式瀑布流

效果：

感谢迅雷ued的图片支持

　 转载请注明出处：http://www.cnblogs.com/TheViper/p/4026462.html

　参考：张鑫旭的这篇文章http://www.zhangxinxu.com/WordPRess/2012/03/%E5%A4%9A%E6%A0%8F%E5%88%97%E8%A1%A8%E5%8E%9F%E7%90%86%E4%B8%8B%E5%AE%9E%E7%8E%B0%E7%9A%84%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80-waterfall-layout/

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

  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:false102     });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 = Math134         .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 });

html

 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>

css

 1 #wrap ul li { 2 display: inline-block; 3 *display: inline; 4 zoom: 1; 5 vertical-align: top; 6 font-size: 16px; 7 } 8 #wrap ul li p { 9 margin: 5px 2.5px;10 border: 1px solid red;11 min-width: 192px;12 min-height: 100px;13 }14 #wrap span {15 display: block;16 }17 #waterFallDetect {18 width: 192px;19 height: 100px;20 border: 1px solid red;21 }