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