js 鼠标滚动到某屏时，加载那一屏的数据，仿京东首页楼层异步加载模式

js用处：在做商城时，首页图片太多，严重影响首页打开速度，所以我们需要用到异步加载楼层。
js名称：鼠标滚动到某屏时，加载那一屏的数据，仿京东首页楼层模式
js解释：1、用于商城的楼层内容异步加载，滚动条滚动时才加载数据
          2、如果当前屏幕上显示了好几个楼层，那么同时执行这几个楼层的异步加载
          3、如果滚动条在页面中间，此时刷新页面，刷新成功后，执行当前显示在屏幕上的几个楼层的异步加载，未显示的不加载
          4、如果滚动条在页面下面，此时刷新页面，刷新成功后，执行当前显示在屏幕上的几个楼层的异步加载，滚动条向上滚动时才加载上面的楼层

下面上代码：

一、CSS

*{margin:0px;padding:0px;}
body{height:10000px;}
.header{
    height: 1000px;
    background-color: #0C3;
}
.yb_louceng_1{
    background-color: #03F;
    height: 640px;
}
.yb_louceng_2{
    background-color: #F33;
    height: 640px;
}
.yb_louceng_3{
    background-color: #03F;
    height: 640px;
    color: #093;
}
.yb_louceng_4{
    background-color: #F0F;
    height: 640px;
}

二、js

/**
 * js用处：在做商城时，首页图片太多，严重影响首页打开速度，所以我们需要用到异步加载楼层。
 * js名称：鼠标滚动到某屏时，加载那一屏的数据，仿京东首页楼层模式
   js解释：1、用于商城的楼层内容异步加载，滚动条滚动时才加载数据
          2、如果当前屏幕上显示了好几个楼层，那么同时执行这几个楼层的异步加载
          3、如果滚动条在页面中间，此时刷新页面，刷新成功后，执行当前显示在屏幕上的几个楼层的异步加载，未显示的不加载
          4、如果滚动条在页面下面，此时刷新页面，刷新成功后，执行当前显示在屏幕上的几个楼层的异步加载，滚动条向上滚动时才加载上面的楼层
 * 注意：请引入jquery  如果效果实现不了，请检查版本为1.8.3
 * 作者：yb
 * 网址：http://www.cnblogs.com/phpyangbo/
 * 
 */

$(function(){
    //载入页面时执行加载
    yb_louceng_panduan();
    //浏览器滚动时执行加载
    $(window).scroll(function(){
        yb_louceng_panduan();
        
    });
});

//楼层位置数组    
var yb_louceng_weizhi            =    new Array();

yb_louceng_weizhi[0]            =    new Array();
yb_louceng_weizhi[0]["start"]    =    0;
yb_louceng_weizhi[0]["end"]        =    1000;
yb_louceng_weizhi[0]["state"]    =    false;
yb_louceng_weizhi[1]            =    new Array();
yb_louceng_weizhi[1]["start"]    =    1000;
yb_louceng_weizhi[1]["end"]        =    1640;
yb_louceng_weizhi[1]["state"]    =    false;
yb_louceng_weizhi[2]            =    new Array();
yb_louceng_weizhi[2]["start"]    =    1640;
yb_louceng_weizhi[2]["end"]        =    2280;
yb_louceng_weizhi[2]["state"]    =    false;
yb_louceng_weizhi[3]            =    new Array();
yb_louceng_weizhi[3]["start"]    =    2280;
yb_louceng_weizhi[3]["end"]        =    2920;
yb_louceng_weizhi[3]["state"]    =    false;
yb_louceng_weizhi[4]            =    new Array();
yb_louceng_weizhi[4]["start"]    =    2920;
yb_louceng_weizhi[4]["end"]        =    3560;
yb_louceng_weizhi[4]["state"]    =    false;


//楼层判断执行函数
function yb_louceng_panduan(){
    var yb_getScrollTop        =    getScrollTop();        //滚动条在Y轴上的滚动距离
    var yb_getWindowHeight    =    getWindowHeight();    //浏览器窗口高度
    var yb_chufa_zuixiao_y    =    yb_getScrollTop;    //触发的最小y值
    var yb_chufa_zuida_y    =    yb_getScrollTop+yb_getWindowHeight;    //触发的最大y值
        
    //循环判断
    for(var i=0;i<yb_louceng_weizhi.length;i++){
            
        var yb_panduan_left_1    =    yb_chufa_zuixiao_y>=yb_louceng_weizhi[i]["start"] && yb_chufa_zuixiao_y<=yb_louceng_weizhi[i]["end"];
        var yb_panduan_left_2    =    yb_chufa_zuida_y>=yb_louceng_weizhi[i]["start"] && yb_chufa_zuida_y<=yb_louceng_weizhi[i]["end"];
        var yb_panduan_left_3    =    yb_chufa_zuixiao_y<=yb_louceng_weizhi[i]["start"] && yb_chufa_zuida_y>=yb_louceng_weizhi[i]["end"];
            
        if((yb_panduan_left_1 || yb_panduan_left_2 || yb_panduan_left_3) && yb_louceng_weizhi[i]["state"]==false){
            //改变楼层状态
            yb_louceng_weizhi[i]["state"]    =    true;
            alert("正在加载第"+i+"个楼层");
            //在此处构建ajax请求楼层数据
            //处理异步数据的逻辑结构开始
            //=================================
            
            
            
            //=================================
            //处理异步数据的逻辑机构完
        }
    }    
}




//滚动条在Y轴上的滚动距离
function getScrollTop(){
　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
　　if(document.body){
　　　　bodyScrollTop = document.body.scrollTop;
　　}
　　if(document.documentElement){
　　　　documentScrollTop = document.documentElement.scrollTop;
　　}
　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
　　return scrollTop;
}

//文档的总高度
function getScrollHeight(){
　　var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
　　if(document.body){
　　　　bodyScrollHeight = document.body.scrollHeight;
　　}
　　if(document.documentElement){
　　　　documentScrollHeight = document.documentElement.scrollHeight;
　　}
　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
　　return scrollHeight;
}

//浏览器视口的高度
function getWindowHeight(){
　　var windowHeight = 0;
　　if(document.compatMode == "CSS1Compat"){
　　　　windowHeight = document.documentElement.clientHeight;
　　}else{
　　　　windowHeight = document.body.clientHeight;
　　}
　　return windowHeight;
}

三、HTML

<div class="header">头部内容</div>

<div class="yb_louceng_1">楼层1内容</div>
<div class="yb_louceng_2">楼层2内容</div>
<div class="yb_louceng_3">楼层3内容</div>
<div class="yb_louceng_4">楼层4内容</div>