瀏覽器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

總結

公告

您的項目需求