avalonjs响应式瀑布流
效果:
感谢迅雷ued的图片支持
转载请注明出处:http://www.cnblogs.com/TheViper/p/4026462.html
布局不是基于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:false 102 }); 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 = Math 134 .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 }
posted on 2014-10-15 15:33 TheViper_ 阅读(2736) 评论(1) 编辑 收藏 举报