ajax按楼层加载数据

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ajax按楼层加载数据</title>
<style>
* {
    box-sizing: border-box;
    outline: none;
}
.head{
     100%;
    height: 500px;
}
p {
    margin: .5em;
    word-break: break-all;
}
.container {
    position: relative;
     700px;
    height: 500px;
    margin: auto;
    padding-right: 200px;
}
.content {
     100%;
    height: 100%;
    border: 1px solid #ccc;
}
.content-opt {
    position: absolute;
    top: 0;
    right: 0;
     200px;
    height: 100%;
}
.content-text {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    border: 1px solid #ccc;
    overflow: auto;
}
.content-input {
    position: absolute;
    bottom: 0;
     100%;
    height: 30px;
    border: 1px solid #ccc;
}
.content-input input {
     70%;
    padding: 2px;
    border-radius: 5px;
}
.content-input button {
    padding: 3px 10px;
    border: none;
    border-radius: 5px;
    background: rgb(90, 154, 214);
}
</style>
<body style="background: #ccc;">
<div class="head"></div>
<!--楼层1开始-->
<div class="floor"  id="floor1" style="height: 1500px;">
    
</div>
<!--楼层1结束-->
<!--楼层2开始-->
<div class="floor"  id="floor2" style="height: 1500px;">
    
</div>
<!--楼层2结束-->

<script src="js/jquery.min.js"></script>
<script>
    $(document).ready(function(){

    var successload = new Array(); //已加载楼层
     //滚动条滚动
    $(window).scroll(function () { scrollload(); });
    //滚动条滚动事件
    function scrollload() {
        var scrolltop = $(this).scrollTop();
        //当内容滚动到底部时加载新的内容
        $(".floor").each(function (index, value) {
            if (scrolltop + $(window).height() >= $(this).offset().top && $(this).offset().top + $(this).height() >= scrolltop) {
                if ($.inArray(index + 1, successload) == -1) {
                    loadFloor(index + 1);
                    successload.push(index + 1);
                }
            }
        });
    }
    //楼层商品绑定
    function loadFloor(loadIndex) {
        if (loadIndex == 1) {
            //$('#floor1').append("楼层一");  
            $.ajax({
                type: "POST",//请求方式
                url: "floor1.json",//地址，就是json文件的请求路径
                dataType: "json",//数据类型可以为 text xml json  script  jsonp
　　　　　　　　　 success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
                    $.each(result,function(index,obj){
                        if(obj['sex']==0){
                            $("#floor1").append(
                            "<div class='product'>"
                                +"<div class='p1 p'>"+obj['name']+"</div>"+
                            "</div>");
                        }
                  
                    });
                }
            });            
        }
        if (loadIndex == 2) {
            //$('#floor2').append("楼层二");            
            $.ajax({
                type: "POST",//请求方式
                url: "floor1.json",//地址，就是json文件的请求路径
                dataType: "json",//数据类型可以为 text xml json  script  jsonp
　　　　　　　　　 success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
                    $.each(result,function(index,obj){
                        if(obj['sex']==1){
                            $("#floor2").append(
                            "<div class='product'>"
                                +"<div class='p1 p'>"+obj['name']+"</div>"+
                            "</div>");
                        }
                  
                    });
                }
            });
            
        }
    }

});
</script>
</body>
</html>

floor1.JSON数据：

[
    {
      "name":"张国立",
      "sex":1
    },
    {
      "name":"张铁林",
      "sex":1
    },
    {
      "name":"邓婕",
      "sex":0
    },
    {
      "name":"成龙",
      "sex":1
    },
    {
      "name":"张杰",
      "sex":1
    },
    {
      "name":"尚雯婕",
      "sex":0
    }
  ]