下拉加载

 <script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true
    });
    $(document).ready(function(){
        var range = 50;             //距下边界长度/单位px
        var elemt = 100;           //插入元素高度/单位px
        var maxnum = 60;            //设置加载最多次数
        var num = 1;
        var totalheight = 0; 
        var main = $("#content");                     //主体元素
        $(window).scroll(function(){
            var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)
            
            //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
            //console.log("页面的文档高度 ："+$(document).height());
            //console.log('浏览器的高度：'+$(window).height());
            
            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
            if(($(document).height()-range) <= totalheight  && num != maxnum) {
                       $.ajax({
                           url: '../phone/getUpdate.do',
                           type: 'POST',
                           dataType: "json",
                          data: "cityName=北京市&pageNum="+num,
                           success:function(data){
                               $(data).each(function(){
                                   var text='<div class="likeList"><a  class="picLink" ><section><img class="lazyimg" src="../'+this.imagesPath+'" alt="" data-original="../product/productDetail.do?productId=3"><div class="priceAndBoss">  <span class="price"><p>¥<span>0</span>起</p><s class="oldPrice">¥0</s></span></div>  </section>  <p class="introduce">带你免费看电影，你来不来</p>  <p class="sName">星城时代电影城</p>  <div class="address"><span>广州<s></s>石基</span>  </div>  </a></div>';
                                var head='<a href="../phone/productDetail.do?id='+this.id+'"<div class="chang_main">';
                                head+='<div class="main_img">';
                                head+='<img src="../'+this.imagesPath+'"/></div>';
                                head+='<div style="clear:both"></div>';
                                head+=' <div class="detial">';
                                head+=' <p class="detial_product">'+this.name+'</p>';
                                head+='<p class="detial_info">'+this.productInfo+'</p>';
                                head+='<p class="detial_price"><span class="small">￥</span><span class="big">325</span></p>';
                                head+=' </div> </div></a>';
                                   main.append(head);
                                   //main.append("<li style='border:1px solid tomato;margin-top:20px;color:#ac"+(num%20)+(num%20)+";height:"+elemt+"' >"+this.name+"></li>");
                               });
                           }
                       });
                num++;
            }
        });
    });
    </script>