首页 > 代码库 > 基于jquery和knockout.js 写个瀑布流异步加载分页

基于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 写个瀑布流异步加载分页