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

览器js做简单分页（JQuery）

注意，正经需求千万不要用js在浏览器分页，数据太多浏览器压力会很大，实测4W张图片浏览器卡死，如果不想加班老老实实在服务器端做分页吧！
此js分页适用于数据量较小的情况
使用：引入js文件，参考https://www.jq22.com/jquery-info10344按文件内结构引入相关资源创建div 在此div上初始化分页
更多模板访问http://www.jq22.com

击右上方红色按钮关注“web秀”，让你真正秀起来

前言

在css3到来之前，都是用js来操作dom元素，计算位置，大小，形成瀑布流布局。但是有了css3之后，一切实现起来就太简单了，没有复杂的逻辑，轻松的几行样式代码就可以搞定。

回顾以前（js瀑布流）

基于waterfall.js（11.8kb）,还得写入基础的样式，初始化等等，对比其他js，已经是很简单了。

var waterfall=new WaterFall({ 
 container: '#waterfall', 
 pins: ".pin", 
 loader: '#loader', 
 gapHeight: 20, 
 gapWidth: 20, 
 pinWidth: 216, 
 threshold: 100 
});

但是，有了css3，再简洁的js，都比不过简单的css代码。

display: flex

关键点，横向 flex 布局嵌套多列纵向 flex 布局，使用了 vw 进行自适应缩放

// pug 模板引擎
div.g-container
 -for(var i=0; i<4; i++)
 div.g-queue
 -for(var j=0; j<8; j++)
 div.g-item

不熟悉pug模板（jade）的，可以先去了解一下。其实看大致也就懂了，就是循环多个元素，没有复杂的逻辑。

$lineCount: 4;
$count: 8;
// 随机数（瀑布流某块的高度）
@function randomNum($max, $min: 0, $u: 1) {
 @return ($min + random($max)) * $u;
}
// 随机颜色值
@function randomColor() {
 @return rgb(randomNum(255), randomNum(255), randomNum(255));
}
.g-container {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 overflow: hidden;
}
.g-queue {
 display: flex;
 flex-direction: column;
 flex-basis: 24%;
}
.g-item {
 position: relative;
 width: 100%;
 margin: 2.5% 0;
}
@for $i from 1 to $lineCount+1 {
 .g-queue:nth-child(#{$i}) {
 @for $j from 1 to $count+1 {
 .g-item:nth-child(#{$j}) {
 height: #{randomNum(300, 50)}px;
 background: randomColor();
 // 瀑布流某块中间的数字
 &::after {
 content: "#{$j}";
 position: absolute;
 color: #fff;
 font-size: 24px;
 // 水平垂直居中
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }
 }
 }
 }
}

预览：

CSS 实现瀑布流布局（display: flex）

演示地址：点击文章结尾“了解更多”

column-count

关键点， column-count: 元素内容将被划分的最佳列数 break-inside: 避免在元素内部插入分页符

// pug 模板引擎
div.g-container
 -for(var j=0; j<32; j++)
 div.g-item

column-count 看起来比display: flex更科学，模板不需要2层循环，更简洁明了。如果真正用到数据上面，会更好处理。

$count: 32;
// 随机数（瀑布流某块的高度）
@function randomNum($max, $min: 0, $u: 1) {
 @return ($min + random($max)) * $u;
}
// 随机颜色值
@function randomColor() {
 @return rgb(randomNum(255), randomNum(255), randomNum(255));
}
.g-container {
 column-count: 4;
 column-gap: .5vw;
 padding-top: .5vw;
}
.g-item {
 position: relative;
 width: 24vw;
 margin-bottom: 1vw;
 break-inside: avoid;
}
@for $i from 1 to $count+1 {
 .g-item:nth-child(#{$i}) {
 height: #{randomNum(300, 50)}px;
 background: randomColor();
 &::after {
 content: "#{$i}";
 position: absolute;
 color: #fff;
 font-size: 2vw;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }
 }
}

预览：

CSS 实现瀑布流布局（column-count）

演示地址：点击文章结尾“了解更多”

display: grid

关键点，使用 grid-template-columns、grid-template-rows 分割行列使用 grid-row 控制每个 item 的所占格子的大小

// pug 模板引擎
div.g-container
 -for(var i=0; i<8; i++)
 div.g-item

样式

$count: 8;
// 随机数（瀑布流某块的高度）
@function randomNum($max, $min: 0, $u: 1) {
 @return ($min + random($max)) * $u;
}
// 随机颜色值
@function randomColor() {
 @return rgb(randomNum(255), randomNum(255), randomNum(255));
}
.g-container {
 height: 100vh;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: repeat(8, 1fr);
}
@for $i from 1 to $count+1 {
 .g-item:nth-child(#{$i}) {
 position: relative;
 background: randomColor();
 margin: 0.5vw;
 &::after {
 content: "#{$i}";
 position: absolute;
 color: #fff;
 font-size: 2vw;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }
 }
}
.g-item {
 &:nth-child(1) {
 grid-column: 1;
 grid-row: 1 / 3;
 }
 &:nth-child(2) {
 grid-column: 2;
 grid-row: 1 / 4;
 }
 &:nth-child(3) {
 grid-column: 3;
 grid-row: 1 / 5;
 }
 &:nth-child(4) {
 grid-column: 4;
 grid-row: 1 / 6;
 }
 &:nth-child(5) {
 grid-column: 1;
 grid-row: 3 / 9;
 }
 &:nth-child(6) {
 grid-column: 2;
 grid-row: 4 / 9;
 }
 &:nth-child(7) {
 grid-column: 3;
 grid-row: 5 / 9;
 }
 &:nth-child(8) {
 grid-column: 4;
 grid-row: 6 / 9;
 }
}

display: grid样式上面感觉也不好用，需要书写很多grid-column、grid-row。

预览：

CSS 实现瀑布流布局（display: grid）

演示地址：点击文章结尾“了解更多”

总结

通过，这3种CSS瀑布流布局，你更喜欢哪一种呢？

个人更喜欢column-count，看起来更加清晰，容易理解，代码量也很少。

公告

喜欢小编的点击关注，了解更多知识！

源码地址请点击下方“了解更多”

                                 分页

/=======================分页样式==================================/

                      /*分页样式*/  

                     .page{  

                     display:inline-block;  
                     width:100%;  
                   text-align:center;  
                    height:35px;  
                line-height:35px;  
               background-color:none;  
         }  
             .page  .pagination{  
            margin:0px  !important;  
  }  
       .page  .pagination  li  a{  
       /*修改按钮样式*/  
        border:none  !important;  
        background-color:transparent;  !important;  
        color:#555;  
        cursor:pointer;  
  }  
     .page  .pagination  li  a:hover,.page  .pagination  li  a:focus,.page  .pagination  li                         a:active{  
      background-color:#ccc;  
     }  
      .page  .pagination  li.active  a,.page  .pagination  li.active  a:hover,.page  .pagination                    li  a:active,.page  .pagination  li  a:focus{  
       color:#0099ff;  
        cursor:default;  
     background-color:none;  
   }  
    .pageinfo{
      display:none  !important;
  }
    /*隐藏分页信息*/  
    .clickmore{  cursor:pointer;  }  
     .pagination>.action>a:hover,.pagination>.action>a:focus{  color:#0099ff  !important;  cursor:default;  }

/*======================分页样式结束============================/ 上面写的分页样式，可自行修改，下面是分页组件代码：

    /**  
   * bootstrap 对应的独立分析组件  
* @demo 
* pagination.init({  
*   selector : '.page', //选择器，作为渲染目标,默认为 '.page.pagination',非必须  
*   count : 120, //为总记录数，必须  
*   isTransform : false,//是否转换为符合后台需要的参数begin /end  
*   page : 1, //为当前页码，非必须  
*   pagesize : 10, //为每页条数，默认10，非必须  
*   increment : 10, //为页面存在的分页增量，比如只显示5个页码，非必须  
*   pageArray : [], //可以进行生成下拉框，比如 10，20，50 ，选择不同的页码进行分页，非必须  
*   previousTitle : '点击查看',//为上一页的title显示，未实现；  
*   callback : function(pageObject){//为分页点击回调函数，必须  
*     console.log(pageObject);//pageObject={page : 1,pagesize:10};回调函数返回值，包括下一个页码和每页条数  
*   }  
* });  
* @since 2016年2月15日 15:18:36  
* @author lixun  
* @version 1.0  
* @edited by lixun ,增加多实例；一个页面多个分页 ；  
* 处理思路：  
* 1\. 对应的每个selector有一个pagination,然后在调用的时候根据selector进行查找  
* 2\. 处理的内容：1）分页加载；2）事件绑定 3）回调函数 
* 3\. 处理原则：平滑处理，原有的可继续使用；  
*/ 
var pagination={
_defaultSelector : '.page .pagination',    //默认选择器
_defaultPagesize : 20,                    //默认分页条数
_defaultIncrement : 10,                    //默认分的页码数
_defaultPageArray : [10,20,50,100],        //默认的条码下拉框
_map : {    //用户处理多实例增加的容器，不可覆盖
    //selector : {私有属性}
    //".page .column" : {}
},
//通用属性
lastSelector : '',//上一个选择器，用于开发者不传递参数的时候，去查找上一个选择器用的。
previousTitle : '上一页',
nextTitle : '下一页',
previousContent : '上一页',
nextContent : '下一页',
//获得分页实例
_getPagination : function(selector){
    if(null !=selector && selector !='' && $(selector).length > 0){
        return pagination._map[selector];
    }else{
        console.error('selector 传参错误或$('+selector+')不存在!');
    }
    return null;
},
//获得返回的字符串
pageArrayStr : function(selector,ps){
    var pa=pagination._map[selector].pageArray;
    if(null !=pa && pa.length > 0){
        var concatStr='<select onchange="pagination.changePagesize(\''+(selector)+'\',event)" style="height:20px;line-height:20px;padding:0px;margin-top:-2px;">';
        var i=0,max=pa.length;
        for(;i<max;i++){
            var v=pa[i];
            concatStr +='<option value="'+v+'" '+(v==ps ? 'selected="true"' : '')+'>'+v+'</option>';
        }
        concatStr +='</select>';
        return concatStr;
    }
    return "";
},

//绑定事件
bindEvent : function(selector){
    if(selector && selector !=''){
        var _tempPaginationInstance=pagination._map[selector] || {};
        var _bindE=_tempPaginationInstance.bindE==true ? true : false;
        if(_bindE==false){
            _tempPaginationInstance.bindE=true;
            pagination._map[selector]=_tempPaginationInstance;
            //跳转页面
            $(selector).delegate('li.unselect','click',pagination.clickpage);
            //绑定上一页事件
            $(selector).delegate('li.pageup','click',pagination.pageup);
            //绑定下一页事件
            $(selector).delegate('li.pagedown','click',pagination.pagedown);
            //绑定前面页面事件
            $(selector).delegate('a.previous','click',pagination.previouspage);
            //绑定后面页面事件
            $(selector).delegate('a.next','click',pagination.nextpage);
        }
    }
},
//分页初始化
init : function(params){
    //处理传参数据
    params=params || {};
    params.count=params.count || 0;
    params.pagesize=params.pagesize || pagination._defaultPagesize;
    var paramSelector=pagination._defaultSelector;
    if(params.selector){
        paramSelector=params.selector;
    }
    //获得选择器后，进行实例处理
    var paginationInstance=pagination._getPagination(paramSelector);
    //传参获取最新配置
    var tempPaginationInstance={
        selector : paramSelector,
        page : params.page ? params.page : (paginationInstance && paginationInstance.action==true ? (paginationInstance.page ? paginationInstance.page : 1) : 1),
        count : params.count || 0,
        action : false,
        bindE : false,//是否绑定事件
        pagesize : params.pagesize,
        callback : params.callback || $.noop,
        pagenumber : (parseInt((params.count || 0)/(params.pagesize||pagination._defaultPagesize),10)+((params.count||0)%(params.pagesize||pagination._defaultPagesize)==0 ? 0 : 1)),//根据总数和一页条数获得页码数量
        increment :  params.increment || pagination._defaultIncrement,
        pageArray : params.pageArray || pagination._defaultPageArray
    };
    if(paginationInstance && undefined !=paginationInstance){
        //存在实例,进行更新。
        tempPaginationInstance.bindE=true;//如果存在的话，肯定绑定了
        pagination._map[paramSelector]=$.extend(paginationInstance,tempPaginationInstance);
    }else{
        pagination._map[paramSelector]=tempPaginationInstance;//重新赋值
        pagination.bindEvent(paramSelector);//绑定事件
    }
    pagination.loadPage(paramSelector);
    pagination.lastSelector=paramSelector;
},
//点击页面数直接跳转
clickpage : function(){
    var $a=$(this).find('a');
    var selector=$a.attr('selector');
    var gonumber=parseInt($a.html(),10);
    $(selector+' li.active').addClass('unselect').removeClass('active');
    $(this).addClass('active').removeClass('unselect');
    pagination.gopage(selector,gonumber);
},
//向上翻页
pageup :  function(){
    var $a=$(this).find('a');
    var selector=$a.attr('selector');
    var _tempInstance=pagination._map[selector];
    if(_tempInstance){
        //得到当前页面，然后翻页，如果在边界，那么就要进行触发一次翻页事件
        var  $actel=$(selector+' li.active a');
        var nownumber=parseInt($actel.html(),10);
        if(nownumber==1){
            return false;
        }else{
            pagination.gopage(selector,nownumber-1);
        }
    }
},
//向下翻页
pagedown : function(){
    var $a=$(this).find('a');
    var selector=$a.attr('selector');
    var _tempInstance=pagination._map[selector];
    if(_tempInstance){
        var pagenumber=_tempInstance.pagenumber;
        //获得该实例的分页码数
        var  $actel=$(selector+' li.active a');
        var nownumber=parseInt($actel.html(),10);
        if(nownumber==pagenumber){
            return false;
        }else{
            pagination.gopage(selector,nownumber+1);
        }
    }
},
//前面页面
previouspage : function(){
    var selector=$(this).attr('selector');
    var _tempInstance=pagination._map[selector];
    if(_tempInstance){
        var increment=_tempInstance.increment,
        page=_tempInstance.page;
        //判断当前是第几个，比如16，那么就以10的倍数向前翻页
        var $nowobj=$(selector+' a.previous').parent();
        var nextnumber=parseInt($nowobj.next().children().html(),10);
        var end=(nextnumber-1)%increment > 0 ? parseInt((nextnumber/increment),10)*increment : parseInt((nextnumber/increment-1),10)*increment;
        pagination.gopage(selector, end+1);
    }
},
//后面页面
nextpage : function(){
    //判断当前点击的哪些，比如：现在是5，点击生成6...
    var selector=$(this).attr('selector');
    var _tempInstance=pagination._map[selector];
    if(_tempInstance){
        var increment=_tempInstance.increment;
        var $nowobj=$(selector+' a.next').parent();
        var prenumber=parseInt($nowobj.prev().children().html(),10);
        if(parseInt(prenumber/5,10)==1){//说明在第一页，要从5加载5个，直到结束
            pagination.addPage(selector,$nowobj,5);
        }else{
            //第二次 增加页面数量了，应该是从10开始了...
            pagination.addPage(selector,$nowobj,increment);
        }
    }
},
addPage : function(selector,domobj,size){
    var _tempInstance=pagination._map[selector];
    if(_tempInstance){
        var pagenumber=_tempInstance.pagenumber,
        increment=_tempInstance.increment;
        var start=parseInt(domobj.prev().children().html(),10);
        pagination.gopage(selector, start+1);
    }
},
loadPage : function(selector){
    //根据selector获得count,pagesize,page
    var _tempInstance=pagination._map[selector];
    if(!_tempInstance){
        console.log('error : _tempInstance is null now ,check pagination params please!');
        return null;
    }
    var count=_tempInstance.count,
        pagesize=_tempInstance.pagesize,
        page=_tempInstance.page,
        increment=_tempInstance.increment,
        pageArrayStr=pagination.pageArrayStr(selector,pagesize),
        pagenumber=_tempInstance.pagenumber;
    var $page=$(selector);
    //清空内容
    $page.html('');
    var pageno=pagenumber;
    page=page > pageno ? 1 : page;    //如果当前页码树大于总页码数则置为1，否则为当前页码数；

    //如果页数超过10，则增...,以5个数字递增，
    //显示到page页面的下一个5的倍数上。
    var endpage=(parseInt(page/increment,10))*increment > pageno ? pageno : (parseInt(page/increment,10)+(page%increment==0 ? 0 : 1))*increment;
    if(pageno<=increment){
        endpage=pageno;
    }
    var pageHtml='';
    if(pageArrayStr==''){
    }else if(pagination._map[selector].pageArray.length==1){
        pageHtml='<li class="pageinfo">共'+count+'条 </li>';
    }else{
        pageHtml='<li class="pageinfo">共'+count+'条 , 每页'+pageArrayStr+'条</li>';
    }
    $page.append(pageHtml);
    $page.append('<li class="prev pageup '+(page==1 ? 'disabled' : '')+'"><a title="'+pagination.previousTitle+'" href="javascript：;" selector="'+(selector)+'">'+pagination.previousContent+'</a></li>');
    //判断第几页
    var start=0;
    if(page > increment && page <=pageno){
        $page.append('<li><a class="previous" href="javascript：;" selector="'+(selector)+'">...</a></li>');
        //给一个自定义增长数量，比如5个，每次增长五个，当前页面6页面，增长5个为10个，start page为 6
        start=parseInt((page%increment==0 ? (page-1) : page)/increment,10)*increment;
        endpage=(start+increment ) > pageno ? pageno : (start+increment);//如果开始页面加上增加页面大于最大页码数，则等于最大页码数
        if(endpage-page <increment){
            start=endpage-increment;
        }
    }
    for(var i=start;i<(endpage==0?1:endpage);i++){
        var listr='<li class="unselect"><a href="javascript：;" selector="'+(selector)+'">'+(i+1)+'</a></li>';
        //在第page页面增加样式
        if((page-1)==i){
            listr='<li class="active"><a selector="'+(selector)+'">'+(i+1)+'</a></li>';
        }
        $page.append(listr);
    }
    if(pageno > 5 && endpage !=pageno){
        $page.append('<li><a class="next" href="javascript：;" selector="'+(selector)+'">...</a></li>');
    }
    $page.append('<li class="next pagedown '+(page==pageno ? 'disabled' : '')+'"><a title="'+pagination.nextTitle+'" href="javascript：;" selector="'+(selector)+'">'+pagination.nextContent+'</a></li>');
},
//跳转页面
gopage : function(selector,page){
    var _tempInstance=pagination._map[selector];
    if(_tempInstance){
        _tempInstance.page=page;
        _tempInstance.action=true;
        _callback=_tempInstance.callback;
        _pagesize=_tempInstance.pagesize;
        pagination._map[selector]=_tempInstance;
        _callback(pagination.transform({
            page : page,
            rows : _pagesize
        }));
    }
},
/*返回现在的页面*/
getNowPage : function(selector){
    selector=selector || (pagination.lastSelector || pagination._defaultSelector);//获取上一个选择器
    var _tempInstance=pagination._map[selector];
    if(_tempInstance){
        _tempInstance.action=true;
        var _page=_tempInstance.page,
            _pagesize=_tempInstance.pagesize;
        pagination._map[selector]=_tempInstance;
        return pagination.transform({
            page : _page,
            rows : _pagesize
        });
    }
    return null;
},
transform : function(paginationParams){
    if(pagination.isTransform && pagination.isTransform==true){
        var p=paginationParams.page || 1;
        var rows=paginationParams.pagesize || 10;
        return {
            begin : (p-1)*rows+1,
            end : p*rows
        };
    }
    return paginationParams;
},
//返回分页参数，以供列表页面加载数据使用
getParams :function(selector){
    selector=selector || (pagination.lastSelector || pagination._defaultSelector);//获取上一个选择器
    var _tempInstance=pagination._map[selector];
    if(_tempInstance){
        var _pagesize=_tempInstance.pagesize;
        return pagination.transform({
            //第几页，一页有多少条记录
            page:1,
            rows : _pagesize
        });
    }
    return null;
},
changePagesize : function(selector,ev){
    var t=ev.currentTarget || ev.target || ev.srcElement,
        $t=$(t),
        v=$t.find('option:selected').val();
  //            selector=$t.attr('selector');
    var _tempInstance=pagination._map[selector];
    if(_tempInstance){
        _tempInstance.pagesize=v;
        var _callback=_tempInstance.callback;
        pagination._map[selector]=_tempInstance;
        //重新调用callback方法
        _callback(pagination.transform({
            page : 1,
            rows : v
        }));
    }
}
};

仅供借鉴....

在线咨询

上一篇：通过搭建MySQL掌握k8s重要概念（上）：网络与持
下一篇：实现实时输出显示用户在文本框输入的内容的小办法教程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

览器js做简单分页（JQuery）

前言

回顾以前（js瀑布流）

display: flex

column-count

display: grid

总结

公告

您的项目需求