下拉加载

标签：

<script type="text/javascript">
    $(document).ready(function () {
        var page = 1;
        window.loading = false;//触发开关，防止多次调用事件
        $(window).scroll(function () {
            var bot = 50; //bot是底部距离的高度
            if (window.loading == false) {
                if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
                    console.log($(document).height());
                        ajaxdata(page += 1);
                }
            }
        });
    });
    function ajaxdata($page){
        window.loading = true;
        $.getJSON("timeline/total", {page:$page}, function (json) {
            var createHtml = document.getElementById("createHtml");
            var html = "";
            if(json.status==1){
                $.each(json.data, function (index, array) {
                    html += " <li class=‘flex packJustify alignStart bd_b‘>";
                    html += " <div class=‘img flex_0‘><img src=" + array[‘avatar‘] + "></div>";
                    html += " <div class=‘r flex_1‘>";
                    html += " <h3 class="dis_b" f14>";
                    html += " <a href=‘timeline/show?userid=" + array[‘user_id‘] + "‘ class=‘detail‘>" + array[‘nickname‘] + + array[‘id‘] + " </a>";
                    html += " </h3>";
                    html += " <p class=‘f12‘>" + array[‘content‘] + " </p>";
                    html += " <div  class=‘t imgLists fcl‘>";
                    $.each(array[‘resource‘], function (index2, array2) {
                        html += "<div><img class=‘fl dis_b‘ src=" + array2[‘content‘] + "></div>";
                    });
                    html += " </div>";
                    html += " <div class=‘c fcl f10‘>";
                    html += " <span class=‘fl time‘>" + array[‘created_at‘] + " </span>";
                    html += " </div>";
                    html += " </div>";
                    html += " </li>";
                });
                $("#createHtml").append(html);
            }else{
                document.getElementById(‘morebtn‘).innerHTML = ‘没 有 数 据 了‘;
            }
                window.loading = false;
        })
    }
    ajaxdata(1)
</script>

<div id="wrapper" style="height: 1000px; ">
    <div id="scroller">
        <section class="friendsCont bgc_fff">
            <header class="friendsHeader bgh100"></header>
            <section class="friendLists">
                <section class="pr myInfoCont">
                    <div class="pa">
                        <div class="flex">
                            <div class="text">
                                <h2 class="f16">{{$user->nickname}}</h2>
                            </div>
                            <img class="img" src="{{$user->avatar}}">
                        </div>
                        <p class="f12 ta_r"></p>
                    </div>
                </section>
                <section id="content" class="friendListsUl">
                    <ul id="createHtml">
                    </ul>
                </section>
            </section>
            <div id="morebtn"></div>
        </section>
    </div>
</div>

下拉加载

标签：

原文地址：http://www.cnblogs.com/qiuyang1/p/5084111.html