浏览器js做简单分页（JQuery）

• 注意，正经需求千万不要用js在浏览器分页，数据太多浏览器压力会很大，实测4W张图片浏览器卡死，如果不想加班老老实实在服务器端做分页吧！

• 此js分页适用于数据量较小的情况

• 使用：

  1. 引入js文件，参考https://www.jq22.com/jquery-info10344

  2. 按文件内结构引入相关资源

  3. 创建div

  4. 在此div上初始化分页

• 更多模板访问http://www.jq22.com

<div class="zxf_pagediv"></div>
<script type="text/javascript">
    /*
     * js实现分页，适用于数据div被外层div包含的情况
     * <div id="masonry">
     *     <div src="data"/>
     *     <div src="data"/>
     *     <div src="data"/>
     *     ...
     * </div>
     */
    var len = 12;//定义每页长度
    var $wrapper = $("div#" + "masonry");

    /*
     * 业务逻辑
     */
    var all = $wrapper.find("div").length;//所有记录数
    var cnt = Math.ceil(all / len);.//总页数
    var pre = 1;//记录之前的页数
    //
    function show(page,len,attr) {
        var start = (page-1) * len;
        var end = start + len;
        for (var i = start ; i < end;i++)
            $wrapper.find("div:eq(" + i + ")").attr("style","display:"+attr+";");
    }
    //show(1,all,'none');//关闭所有div显示，性能更好一点应该是服务器端在每个div上加display:none
    show(1,len,'block');//显示第一页
    //翻页
    $(".zxf_pagediv").createPage({
        pageNum: cnt,
        current: 1,
        backfun: function(e) {
            if (e.current < 1 || e.current > cnt){
                alert('当前页数不存在，回到首页！');
                e.current = 1;
            }
            show(pre,len,'none');//隐藏上一页
            show(e.current,len,'block');//显示当前页
            pre = e.current;//记录当前页
        }
    });
</script>