avalonjs制作响应式瀑布流特效

瀑布流主要应用在图片展示页面上。如果有一大批图片需要展示，原始图片尺寸不一致，又希望每张图片都能不剪裁，完整显示，那么就要给图片规定一个宽度，解放它们的高度。利用网页高度不限这个特性，充分利用页面的空间，尽可能的展示多的图片。下面我们就来详细探讨下

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

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?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?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 ms-controller="waterfall"> <ul ms-each-els="img_list"> <li ms-each-el="els" ms-attr-id='row{{$index}}' data-each-rendered='rendered'> <p> <img ms-src="http://cued.xunlei.com/demos/publ/img/P_{{el.src}}.jpg" ms-attr-height='{{el.height}}'> <span>{{el.src}}</span> </p> </li> <li 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; }

以上所述就是本文的全部内容了，希望大家能够喜欢。

您可能感兴趣的文章: