月度归档:2016年06月

web页面滚动加载数据 代码分析

依赖jq/zepto

function pullDownLoad(container, prerender, callback) {

  var tpl = '<div id="loading">加载中。。。。。</div>';
  var lock = 0;
 
  //因不同浏览器存在差异,所以可以自定义 加载的距离
  prerender = prerender || 0;
  $(window).on('scroll', (function() {

    //滚动条滑动的距离
    var scrollPos = $(window).scrollTop();

    //总的滑动距离 = 窗体高度 + 滚动条滑动的距离 + 自定义距离
    var totalHeight = parseFloat($(window).height()) + parseFloat(scrollPos) + prerender;

    //页面文档高度 <= 总的滑动距离 && 未锁定
    if (($(document).height()) <= totalHeight && lock == 0) {
     
      //加载动画
      $(container).append(tpl);

      //执行回调
      callback && typeof callback === 'function' && callback();

      //锁定三秒 防止多次加载
      lock = 1;
      setTimeout(function() {
        lock = 0;
      },3e3)
    }

  }));

}

pullDownLoad('#content',50,function() {

  //请求数据
  $.ajax({
    url: 'xxxxxxxxxxx',
    type: 'get',
    data: {
      formData: 'xxx'
    },
    dataType: 'json',
    success: function(ret) {
      $('#loading').remove();
      $('#content').append(ret.data)
    }
  })
})

点击右侧链接查看demo:滚动加载数据demo
下载源码:下载源码

根元素的字体大小 基准值如何获取

物理像素:屏幕上的像素点(设备屏幕实际具有的像素数目,并且 每个像素点都有自己的属性 如:亮度、颜色等) 该值只能通过下面公式来获取 :物理像素 = 设备像素比 * 设备独立像素

设备独立像素:由虚拟像素px作为单位(目测手机屏幕的宽度) 可通过document.documentElement.clientWidth或者document.documentElement.getBoundingClientRect().width或者window.innerWidth来获取,样式表中通过min-device-width来获取 手机端和谷歌调试工具有差异,以手机端为准,详情请查看底部二维码链接

设备像素比:描述以上两个概念的对应关系(dpr) 可通过window.devicePixelRatio来获取,样式表中通过-webkit-device-pixel-ratio、-webkit-min-device-pixel-ratio、-webkit-max-device-pixel-ratio来获取

物理像素 = 设备像素比 * 设备独立像素

//iphone 6
750 = 2 * 375

//iphone 6plus
1242 = 3 * 414

//iphone 5 和 iphone 4
640 = 2 * 320

//小米note顶配版
1440 = 4 * 320

根元素的字体大小基准值 = 物理像素 / 10

//iphone 6
75 = 750 / 10

//iphone 6plus
124.2 = 1242 / 10

//iphone 5 和 iphone 4
64 = 640 / 10

//小米note顶配版
144 = 1440 / 10
//上面的公式除以10是为了取整,方便计算(理论上可以是任何值)

字体大小可根据 设备像素比 计算,并得出对应的px值

//如果设计图宽为750(目前流行以iPhone 6 的 物理像素 750 作为标准来设计 所以在写页面时需要 / iPhone 6 的 设备像素比)  
//假设图中的某个字体大小是32px 那么相应分辨率下的字体大小是:
//iphone 6
32px = (32 / 2) * 2

//iphone 6plus
48px = (32 / 2) * 3

//iphone 5 和 iphone 4
32px = (32 / 2) * 2

//小米note顶配版
64px = (32 / 2) * 4

元素的宽度px如何转换成rem

rem = 设计图的元素宽高 * 设备像素比 / 根元素基准值

//如果设计图是750 图中的元素宽是120px 那么相应分辨率下的rem大小是:
//iphone 6
3.2rem = (120/2) * 2 / 75

//iphone 6plus
2.898550724637681rem = (120/2) * 3 / 124.2

//iphone 5 和 iphone 4
3.75rem = (120/2) * 2 / 64

//小米note顶配版
3.3333333333333335rem = (120/2) * 4 / 144

参考文章:
移动端高清、多屏适配方案
响应式布局—设备像素密度测试

查看你的设备dpr

flex笔记

先在容器中声明 弹性布局(flex布局),即:display:flex;(谷歌内核记得加前缀) display:-webkit-flex;

声明完成后 容器可以设定 6个属性:

flex-direction: 主轴的方向; row水平方向从左到右(默认值) row-reverse反过来(从右到左)column垂直方向从上到下 row-reverse反过来(从下到上)

flex-wrap: 主轴方向上内容超出是否换行; nowrap(默认值) wrap换行 wrap-reverse换行(超出部分出现在上方)

flex-flow: 上面两个属性的缩写; 默认是 row nowrap

justify-content: 主轴方向上的对齐方式; flex-start左对齐 flex-end右对齐 center居中对齐 space-between两端对齐中间间隔相等 space-around每个成员两侧间隔都相等(所以两个成员之间间隔是旁边的一倍)

align-items: 交叉轴方向上的对齐方式; flex-start交叉轴顶点对齐(顶部) flex-end交叉轴终点对齐(底部) center交叉轴中点对齐 baseline成员的第一行文字基线对齐(参考图见底部链接) stretch不设定高度时,高度会被铺满(默认值)

align-content: 多条轴线对齐方式;(只有一条轴线时无效) flex-start交叉轴顶点对齐 flex-end交叉轴终点对齐 center交叉轴中点对齐 space-between交叉轴两端对齐中间间隔相等 space-around所有轴线之间间隔相等 stretch占满整个轴线

说完了容器的属性,下面说一下项目成员的属性 有6个属性:

order: 项目的排列顺序; 默认为0 值越小越靠前

flex-grow: 项目的放大比例; 默认值为0 如果其他项目是1 当前项目是2 则当前项目占的剩余空间是其他项目的一倍

flex-shrink: 项目的缩小比例; 默认值1 即空间不足时自动缩小 0为不缩小 负数无效

flex-basis: 项目在被自动分配空间之前的 主轴方向的宽; 默认值auto 可以设固定值(将不被自动分配空间)

flex: 上面三个flex开头的属性的缩写; 默认值 0 1 auto

align-self: 可给项目单独设置交叉轴方向的对齐方式;(属性和align-item一样) 会覆盖掉从align-item继承的值 默认值auto表示继承父容器的align-item

向阮一峰大牛学习
下面是参考连接:
Flex 布局教程:语法篇 – 阮一峰的网络日志

下面还有一个练习的小青蛙游戏(需翻墙):
Flexbox Froggy – 一个用来学CSS flexbox的游戏

基础知识回顾之–变量声明提升与函数声明提升

来看个例子:

  var a = 1;
  function foo(){
    console.log(a);
    var a = 2;
  }
  foo(); //undefined 为什么是未定义呢?

实际上它是长这样的:

  var a = 1;
  function foo(){
    var a;
    console.log(a);
    a = 2;
  }
  foo(); //undefined 变量声明被提升到了 当前foo函数内部作用域的最顶端

再来看个例子(加深理解):

  console.log(a); //function a() {} 输出了a函数 why?
  var a=1;
  function a() {}

分析一下解析过程:

  var a;
  function a() {}
  console.log(a); //function a() {} 函数声明被提升到了变量a下面 此时的变量a 因为同名 被a函数覆盖
  a=1;// 如果在下一行打印输出变量a 将输出 1

函数声明 优先于 变量声明(js中,函数是第一等公民)

  foo();// 1
 
  var foo = function () {
    console.log('2');
  }

  function foo() {
    console.log('1');
  }

分析代码:

  function foo() {
    console.log('1');
  }
  var foo;
  foo();// 1
  foo = function () {
    console.log('2');
  }