*{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解释：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;

}

<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>