最近在公司做了我们的pc端网站。
需求：实现网页的下拉加载页面
思路：<div>中包含list,这是一个list中包含的元素块一个一个显示。
js监听windows的滚动条，判断滚动条下拉到窗口最下方时调用js方法，js方法，先动态加载一个上边list中的元素块，然后在追加append到上边list下边。
pc端代码如下：

手机端代码如下：

<div >
            <ul id="mediatorList" class="mui-table-view mui-grid-view" style="background-color: #efefea">
            <c:forEach items="${mediatorList.list}" var="mediator" varStatus="status">

                <li class="mui-table-view-cell mui-media mui-col-xs-3" style="height: 40%">

                <a href="${path}/winxin/peopleMediation/mediatorApplyDetail?userUuid=${mediator.uuid}&useruuid=${useruuid}&source=${source}">

                    <c:if test="${mediator.source==1 }">
                        <img class="mui-media-object " style="height:30%" src="${mediator.headimgurl}">
                    </c:if>
                    <c:if test="${mediator.source==2 }">
                        <img class="mui-media-object " style="height:30%"  src="${imgUrl }${mediator.headimgurl}">
                    </c:if>
                </a>
                        <div class="mui-media-body" style="height:70%">
                            <div class="m-txt-box" style="height:70%;text-align:center;">
                                <div style="font-size: 10">
                                ${mediator.sequenceNumber}-${mediator.realname}
                                    </div>
                                <br>
                                <div style="width: 100%;height: 30%;">
                                <button class="mui-btn btn-bg border-none"  style="width:80%;height:100%" id="submit"  onclick="voteOn('${mediator.uuid}')">投票</button>
                                    </div>
                            </div>
                            <p >
                                <img src="${path }/resource/images/vote.png" width="15" height="15" />
                                ${mediator.vote }  
                                <%--${mediator.createtime } </p>--%>
                        </div></li></c:forEach>
</ul>
</div>

js代码：

<script>
    var  pullRefreshss = true;
    $(window).scroll(
            function () {
                /*当前滚动条到顶部的距离*/
                var top = $(document).scrollTop();
                /*当前浏览器的可是高度*/
                var height = document.body.clientHeight;
                /*当前网页（body）的高度*/
                var z_height = $(document).height();
                /*判断（网页的body高度减去当前浏览器的可视高度是否等于滚动条到顶部的距离）
                 * 相等：则判定当前页面在底部
                 * 不相等：判定当前页面不在底部
                 * */
                var stats = ( z_height - height-top < 5) ;
                    $("#show_s").html("top:"+top+",z_height:"+z_height+",height:"+height+",是否底部:"+stats);

                if (stats) {
                    /*当前网页在最底部，执行该函数*/
                    upPullfreshFunction();
                }else {
                    if (!pullRefreshss) {
                        $("#show_view").html("没有更多的数据");
                    }
                }
            }
    );
    function upPullfreshFunction() {
        if (!pullRefreshss) {
            return;
        }
        /*获取当前page值*/
        var page=$("#page").val();
        /*page+1以便来获取下一页的数据*/
        page=Number(page)+Number(1)+0;
        var keyWord= $("#key").val();
        var orders=$("#orders").val();
        if(orders=="up"){
            orders="down";
        }else{
            orders="up";
        }

        var imgurl=$("#imgurl").val();

        var voteimgurl = "${path }/resource/images/vote.png"

        /*封装关键字，类型uuid，需要加载页页码*/
        var opt={}
        var url="${path}/winxin/peopleMediation/toMediatorApplyAjax?keyWord="+keyWord+"&page="+page+"&orders="+orders;
        /*jqury post函数：url，跳转路径；opt：json数据包；function（res），回调函数*/

        $.post(url, opt, function(res) {
            if(res.code=="0"){
                alert(res.errorMessage);
            }else{
                var data=eval(res);
                $("#page").val(data.page);
                var mediatorList=data.mediatorList.list;

                for ( var i = 0; i < mediatorList.length; i++) {
                    var url="${path}/winxin/peopleMediation/mediatorApplyDetail?userUuid="+mediatorList[i].uuid+"&useruuid="+'${useruuid}'+"&source="+source;
                    var img = mediatorList[i].headimgurl;
                    if(mediatorList[i].source==2){
                        img = imgurl+mediatorList[i].headimgurl;
                    }

                    var str="<li class='mui-table-view-cell mui-media mui-col-xs-3' style='height: 40%'>";
                    str=str+"<a href="+url+">";
                    str=str+"<img class='mui-media-object ' src='"+img+ "'style='height:30%'>";
                    str=str+"</a>";
                    str=str+"<div class='mui-media-body' style='height:70%'>";

                    str=str+"<div class='m-txt-box' style='height:70%；text-align:center;'>";
                    str=str+"<div style = ' font-size: 10 ' >"+mediatorList[i].sequenceNumber+"-"+mediatorList[i].realname+"</div>";
                    str = str +"<br>";
                    str=str+"<div style='height: 30%;width: 100%'>";
                    str = str +"<button class='mui-btn btn-bg border-none'  style='width:80%;height:100%' id='submit' "+"onclick=voteOn('"+mediatorList[i].uuid+"')"+">"+"投票"+"</button>";
                    str=str+"</div>";
                    str=str+"</div>";


                    str=str+"<p>";
                    str = str +"<img src = ${path }/resource/images/vote.png width = '15' height = '15'>";
                    str = str +" "+mediatorList[i].vote+" ";
                    str=str+"</p>";

                    str=str+"</div>";

                    str=str+"</li>";
                    ;
                    $("#mediatorList").append(str);
                }
            }

            if(mediatorList.length>0){
            }else{
                pullRefreshss = false;
            }
        });
    }

    /*function upload(){
        if (pullRefreshss) {
            upPullfreshFunction();
        } else {
            $("#show_view").html("没有更多的数据");
        }
    }*/
</script>