基於jquery和knockout.js 寫個瀑布流非同步載入分頁

標籤：

<div class="list-view">    <ul>        <li data-bind="foreach:datalst">            <div class="item border clearfix">                <div class="face fl">                    <a target="_blank" data-bind="attr:{‘title‘:userInfo.username}"  href="javascript:void(0)">                        <img data-bind="attr:{‘src‘:userInfo.myImg}"   class="circle-radius">                    </a>                </div>                <div class="cont">                    <div class="detail">                        <div class="info">                            <a class="nickname" data-bind="text:userInfo.username" href="javascript:void(0)" target="_blank"></a>                        </div>                        <div class="time" data-bind="text:ctime"></div>                        <div class="text" data-bind="html:content">                        </div>                    </div>                    <div class="handle">                        <ul class="clearfix">                            <li>                                <a href="javascript:void(0)"><i class="icon icon-share"></i>分享</a>                            </li>                            <li>                                <a href="javascript:void(0)"><i class="icon icon-review"></i>評論<em>24</em></a>                            </li>                            <li>                                <a href="javascript:void(0)"><i class="icon icon-thumb"></i>贊<em>24</em></a>                            </li>                            <li>                                <a href="javascript:void(0)"><i class="icon icon-coin"></i>打賞</a>                            </li>                            <li>                                <a href="javascript:void(0)"><i class="icon icon-collect"></i>收藏</a>                            </li>                        </ul>                    </div>                </div>            </div>        </li>    </ul>    <p id="a_load_more" class="text_align" style="background: black;" data-bind="click:ajaxGetCommentByPageNum">        載入更多    </p></div>

<script>    $(document).ready(function () {        var ViewModel = function () {            var self = this;            self.pending = 0;//是否正在請求資料，1表示不能發，0表示可以在發請求            self.current_comment_page = 1;//當前是第幾頁；            self.one_page_num = 10;//每頁顯示的條數            self.datalst = ko.observableArray();//雙向繫結的資料；            self.page_max=1;//一個有多少頁；            self.ajaxGetCommentByPageNum = function () {                if(self.page_max <　self.current_comment_page){                    layer.msg(‘資料載入完成了‘);                    return false;                }                if(self.pending == 1){                    return false;                }                self.pending = 1;                $.ajax({                    url: ‘/dksapi/weiboLive/GetSquareLive‘,                    data:{pagecount:self.one_page_num,pageindex:self.current_comment_page,source:0},                    type: ‘get‘,                    contentType: "application/x-www-form-urlencoded; charset=utf-8",                    dataType: ‘json‘,                    success: function (json) {                        if (json.status === ‘success‘) {                            for(var i in json.data.dataList){                                self.datalst.push(json.data.dataList[i]);                            }                            self.page_max=Math.ceil(json.data.dataMeta.totalcount / self.one_page_num);                            self.current_comment_page++;                            setTimeout(function () {                                self.pending = 0;//請求結束                            },500)                        }                    },                    error: function () {                        layer.msg(‘網路錯誤‘);                    }                });            }        };        var currentViewModel = new ViewModel();        ko.applyBindings(currentViewModel);    })</script>

 

基於jquery和knockout.js 寫個瀑布流非同步載入分頁