上拉加载是前端经常遇到的问题，采用插件往往能够轻松解决，这里介绍一种免插件简单实现上拉加载的方法，参考一下，下面分享一下代码。
html
<body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class='ball-pulse'>加载更多</div> </body>
加入了css3动画loading效果；
css
<style type="text/css"> /*loading效果*/ @-webkit-keyframes scale { 0% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; } 45% {-webkit-transform: scale(0.1);transform: scale(0.1);opacity: 0.7; } 80% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; } } @keyframes scale { 0% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; } 45% {-webkit-transform: scale(0.1);transform: scale(0.1);opacity: 0.7; } 80% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; } } .ball-pulse > div:nth-child(1) { -webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); } .ball-pulse > div:nth-child(2) { -webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); } .ball-pulse > div:nth-child(3) { -webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); } .ball-pulse > div { background-color: #aaa; width: 7px; height: 7px; border-radius: 100%; margin: 2px; display: inline-block; } .ball-pulse{text-align: center;color:#aaa;background:#EDF4F4; font-size:16px;height:1.5rem;line-height: 1rem;} body,html,ul,li{padding:0;margin:0;} ul li{height:4.5rem;background:#ccc;border-bottom:2px solid #aaa; list-style: none;} </style>
js部分：
1 <script type="text/javascript" src="jquery-2.1.0.js"></script> 2 <script type="text/javascript"> 3 $(function() { 4 /****************** 滚动上拉下拉加载 ***************/ 5 $(document).on("scroll", function() { 6 var scrollTop = $(this).scrollTop(); 7 var scrollHeight = $(document).height(); 8 var windowHeight = $(window).height(); 9 if($(".ul li").length == 10) { 10 $(".ball-pulse").html("已经到底了！") 11 } else { 12 if(scrollTop + windowHeight == scrollHeight) { 13 //console.log("我到底部了"); 14 setTimeout(getmore, 600) 15 16 function getmore() { 17 $(".ball-pulse").html("<div></div><div></div><div></div>") 18 setTimeout(function() { 19 $(".ball-pulse").html("加载更多") 20 $("ul").append("<li></li><li></li><li></li>") 21 }, 1000) 22 } 23 } 24 } 25 }); 26 }) 27 </script>
当然我们也可以在加载的时候做下js判断，如果数据加载完毕，loading显示“已经到底了！”，这就看我们自己的发挥了，这个demo更适用于移动端页面使用，希望能帮助大家。