avalonjs制作响应式瀑布流特效


Posted in Javascript onMay 06, 2015

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 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>
        <img
          ms-src="http://cued.xunlei.com/demos/publ/img/P_{{el.src}}.jpg"
          width='192' ms-attr-height='{{el.height}}'> <span>{{el.src}}</span>
      </p>
    </li>
    <li id='waterFallDetect' 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;
}

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

Javascript 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
JS性能优化实现方法及优点进行
Aug 30 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 Javascript
javascript实现简单的html5视频播放器
May 06 #Javascript
js实现的四级左侧网站分类菜单实例
May 06 #Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 #Javascript
完美实现仿QQ空间评论回复特效
May 06 #Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 #Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 #Javascript
JS实现CheckBox复选框全选全不选功能
May 06 #Javascript
You might like
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python的Django框架使用入门指引
2015/04/15 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
python实现扫雷游戏
2020/03/03 Python
一套C++笔试题面试题
2012/06/06 面试题
文员个人的求职信范文
2013/09/26 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
网络营销策划方案
2014/06/04 职场文书
公司年终奖分配方案
2014/06/16 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
个人求职信格式范文
2015/03/20 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
机器人瓦力观后感
2015/06/12 职场文书