网上找到到一些JS滚动加载的代码.发现IE不兼容,就修改了一下.用IE,firefox,chrome测试通过.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--把下面路径换成你的Jquery 和bootstrap 文件路径. -->
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery-1.8.3.js"></script>
<script src="bootstrap-3.3.5-dist\js\bootstrap.min.js"></script>
</head>
<body>
<div class="col-sm-4">
<ui class="list-group">
<li class="list-group-item">11</li>
<li class="list-group-item">22</li>
<li class="list-group-item">33</li>
<li class="list-group-item">44</li>
<li class="list-group-item">55</li>
<li class="list-group-item">11</li>
<li class="list-group-item">22</li>
<li class="list-group-item">33</li>
<li class="list-group-item">44</li>
<li class="list-group-item">55</li>
<li class="list-group-item">11</li>
<li class="list-group-item">22</li>
<li class="list-group-item">33</li>
<li class="list-group-item">44</li>
<li class="list-group-item">55</li>
<li class="list-group-item">11</li>
<li class="list-group-item">22</li>
<li class="list-group-item">33</li>
<li class="list-group-item">44</li>
<li class="list-group-item">55</li>
<li class="list-group-item">11</li>
<li class="list-group-item">22</li>
<li class="list-group-item">33</li>
<li class="list-group-item">44</li>
<li class="list-group-item">55</li>
</ui>
</div>
<script>
$(window).scroll(function(){
var totalHeight=parseFloat($(window).height())+ parseFloat($(window).scrollTop());
//200是预设值.表示文档对象高度和窗口高度+滚动条高度对比.如果不加200,在firefox有可能运行不正确.
if($(document).height() <= totalHeight+200){
//这里可以进行ajax请求获取后台数据
$(".col-sm-4").append("<div style='height: 200px;border:1px solid;'>new data</div>");
}
});
</script>
</body>
</html>