2017-3-15 JS 学习笔记

滚动事件的认识

• 实际开发中，我们经常需要监听滚动事件
• 滚动事件一般是由 window 来触发

window.onscroll = function(){
        //获取滚动的距离
        var myScrolltop = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(myScrollTop);
}        

不同浏览器中获取滚动距离的方式

• 在 ie9 以及新的版本

var scrollT = window.pageYOffset;

• 在火狐以及符合 w3c 标准的浏览器

var scrollT = document.documentElement.scrollTop;

• 谷歌浏览器以及没有定义 DTD

var scrollT = document.body.scrollTop;

var myScrollT = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
scroll().top;
scroll().left;

• 抽取滚动距离的方法

//抽取方法用来获取滚动的距离
function scroll(){
        //判断不同浏览器
        if(windows.pageXOffset != null){
                  //ie9 以及新的版本
                 return {
                            top:window.pageYOffset,
                            left:window.pageXOffset
                 } 
        }else if(document.compatMode == 'CSS1Compat'){
                    //表示火狐以及符合 w3c
                    return{
                              top:document.documentElement.scrollTop,
                              left:document.documentElement.scrollLeft
                    }      
        }
        return {
                   top:document.body.scrollTop,
                   left:document.body.scrollLeft
        }
}

瀑布流的注意点

• 获取第一行的高度最短的盒子
• 将后面的盒子放置到高度最短的盒子下方
• 更新最短盒子的高度，再次寻找最短盒子，此处创建函数来执行*
• 当滚动的距离 + 屏幕的高度 >= 最后一个盒子的 offsetTop + 最后一个盒子高度的一半的时候，开始加载图片（此处设定临界值自由设置），此处创建函数来判断
• 加载图片就是动态创建添加盒子，数据是存放在字典中的
• 加载之后再次调用 * 处的函数，让图片正确排版

    
    
    



    
![](images/0.jpg)
    
![](images/1.jpg)
    
![](images/2.jpg)
    
![](images/3.jpg)
    
![](images/4.jpg)
    
![](images/5.jpg)
    
![](images/6.jpg)
    
![](images/7.jpg)
    
![](images/8.jpg)
    
![](images/9.jpg)
    
![](images/10.jpg)
    
![](images/11.jpg)
    
![](images/12.jpg)
    
![](images/13.jpg)
    
![](images/14.jpg)
    
![](images/15.jpg)
    
![](images/16.jpg)
    
![](images/17.jpg)
    
![](images/18.jpg)
    
![](images/19.jpg)
    
![](images/20.jpg)
    
![](images/21.jpg)
    
![](images/22.jpg)
    
![](images/23.jpg)
    
![](images/24.jpg)
    
![](images/25.jpg)
    
![](images/26.jpg)
    
![](images/27.jpg)
    
![](images/28.jpg)
    
![](images/29.jpg)
    
![](images/30.jpg)

• 滚动到某个位置

window.scrollTo(0,800);
//第一个参数表示水平滚动，第二个参数表示垂直滚动

window 的内置对象

• 任何一个全局变量都是 window 的属性
• 任何一个全局函数都是 window 的方法
• 注意不要在 window.onload 方法使用 window 获取全局的属性和方法

console.log(window.dog);
window.sum();

字符串的常见方法

• 创建字符串

var myString = 'my敏感体质';

• 获取某一个字符的位置
  如果获取某个字符的位置，这个字符有多个，那么获取是第一个的位置

//indexOf:从左到右获取字符的位置，顺序是从左到右
var index = myString.indexOf('a');
//lastIndexOf: 从右到左获取字符的位置，结果顺序是从左到右
var lastI = myString.lastIndexOf('a');

• 获取某个位置的字符

//charAt:获取某个位置的字符
var mySym = myString.charAt(1);
//myCodeSym:获取某个字符的 Unicode 编码
//但凡汉子转化成 Unicode 编码值是大于 127 的
var myCodeSym = myString.charCodeAt(1);
//获取字符的长度
console.log(myString.length);

• 获取字符的实际占用字节数

  /*1.创建字符*/
    var myString = '1234324 我的名字';

    /*2.抽取方法获取实际占用的字节数*/
    function  getLength(str){
        /*2.1遍历字符*/
        var length = 0;
        for(var i = 0;i < str.length;i++){
            /*2.2获取每一个字符的Unicode编码值*/
            var mySym = str.charCodeAt(i);
            if (mySym > 127){
                 length +=2;
            }else {
                length+=1;
            }
        }
        return length;

    }

    /*3.调用方法验证是否正确*/
   var result = getLength(myString);
    console.log(result);