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 相关文章推荐
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
JavaScript 事件系统
Jul 22 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 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设计模式之命令模式的深入解析
2013/06/13 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
基于Python开发chrome插件的方法分析
2018/07/07 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
Internet主要有哪些网络群组成
2015/12/24 面试题
机械工程学院大学生求职信
2014/05/25 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
会计求职信怎么写
2015/03/20 职场文书
国富论读书笔记
2015/06/26 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书