代码如下：
<!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 } ]