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>