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怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 Javascript
TypeScript 中接口详解
Jun 19 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 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后台程序与Javascript的两种交互方式
2009/10/25 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python中title()方法的使用简介
2015/05/20 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
党员个人公开承诺书
2014/08/29 职场文书
在校证明模板
2015/06/17 职场文书
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python