原生js实现分页效果（带实例）

其他 2018-08-15 10:45:45 阅读次数: 0

小小插件（静态分页）

效果图：

首先实现简单功能：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title> pager demo </title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's js lib" />
<meta name="description" content="pager demo" />
</head>
<style>
  .j-curr{
    color:red;
  }
  #pager{
    width:400px;
    margin:50px auto;
    text-align:center;
    line-height:26px;
  }
  #pager li{
    display:inline-block;
    padding:0 5px;
    cursor:pointer;
  }
</style>
<body>
<div id="list">
        <figure>sjfejkgnvkn</figure>
        <figure>0222222</figure>
        <figure>块</figure>
        <figure>了</figure>
        <figure>是</figure>
        <figure>0666666</figure>
        <figure>0777777</figure>
        <figure>0888888</figure>
        <figure>我</figure>
        <figure>10101010</figure>
        <figure>11111111</figure>
        <figure>12121212</figure>
        <figure>13131313</figure>
        <figure>14141414</figure>
        <figure>15151515</figure>
        <figure>16161616</figure>
        <figure>17171717</figure>
        <figure>18181818</figure>
        <figure>19191919</figure>
        <figure>20202020</figure>
        <figure>01111111</figure>
        <figure>0222222</figure>
        <figure>0333333</figure>
        <figure>0444444</figure>
        <figure>0555555</figure>
</div>
<div id="pager"></div>

<script>
var pager = function(){
    //公共函数
    function T$(id){
        return document.getElementById(id);
    }
    function T$$(root,tag){
        return (root || document).getElementsByTagName(tag);
    }
    function $extend(object1,object2){
        for(var p in object2){
            object1[p] = object2[p];
        }
        return object1;
    }
    function $each(arr, callback, thisp) {
        if (arr.forEach){
            arr.forEach(callback, thisp);
        }else{
            for(var i = 0, len = arr.length; i < len; i++){
                callback.call(thisp, arr[i], i, arr);
            }
        }
    }
    
    //默认参数配置
    var defaultOptions = {
        elemShowCount:5,     //每页显示条数，默认为5条
        pageShowCount:4,     //显示的页码数目，默认显示4个页码
        showFirstPageBtnAndLastPageBtn:true,     //是否显示首页，尾页，默认显示
        showPrevBtnAndNextBtn:true,    //是否显示上一页，下一页，默认显示
        showPageNumTips:true,      //是否显示【1/7页】页面提示，默认显示
        showPageNum:true      //是否显示分页的数字，默认显示
    };
    
    //主类构造函数 参数说明：bid为元素容器div的ID,pid为分页容器div的ID,options为重写的默认配置参数
    var showPage = function(bid,pid,options){   
        var self = this;             
        if(!(self instanceof showPage)){
            return new showPage(bid,pid,options);
        }
        self.container = T$(bid);    //元素容器div
        self.pagerBox = T$(pid);    //翻页容器div
        if(!self.container){
            return;                     
        }
        self.options = $extend(defaultOptions,options||{});
        self.elem = T$$(self.container,'figure');     //需要分页的元素
        self.elemTotalCount = self.elem.length || 0;    //分页元素的总个数
        self.pageTotalCount = Math.ceil(self.elemTotalCount/self.options.elemShowCount) || 0;   //总页数
    };
    
    showPage.prototype = {
        constructor:showPage,
        //显示当页的元素内容，参数currPageNum为当前页码，从0开始
        showChangeElemCont: function(currPageNum){                     
            var self = this;     //this为showPage对象
            var nextPageCount = (currPageNum+1)*self.options.elemShowCount < self.elemTotalCount ? (currPageNum+1)*self.options.elemShowCount : self.elemTotalCount;     //判断为最后一页时，最后一页应该显示的数据条数
            for(var i=0;i<self.elemTotalCount;i++){
                self.elem[i].style.display = 'none';
            }
            for(var i=currPageNum*self.options.elemShowCount,l=nextPageCount;i<l;i++){
                self.elem[i].style.display = 'block';
            }
        },
        //显示当页的页码内容，参数currPageNum为当前页码，从0开始
        showChangePageCont: function(currPageNum){                      
            var self = this;      //this为showPage对象
            var firstPageHtml = prevPageHtml = pageLinkHtml = nextPageHtml = lastPageHtml = pageTips = '';     //firstPageHtml:首页   prevPageHtml:上一页  pageLinkHtml:页码表   nextPageHtml:下一页  lastPageHtml:尾页   pageTips:页码提示
            var startPage,endPage;        //startPage:页码列表中的第一页   endPage:页码列表中的最后一页
            var pageShowMidCount = Math.ceil(self.options.pageShowCount/2);      //页码中间值，当超过这个值时，页码列表发生变化
            if(self.pageTotalCount <= self.options.pageShowCount){           //总页码数小于等于默认要显示的页码数时，直接在当前页面显示全部的页码
                startPage = 0;
                endPage = self.pageTotalCount-1;
            }else{
                if(self.options.pageShowCount%2 == 0){
                    if((currPageNum + 1 - pageShowMidCount) <= 0){       //首页
                        startPage = 0;
                        endPage = self.options.pageShowCount-1;
                    }else if((currPageNum + 1 + pageShowMidCount) >= self.pageTotalCount){            //尾页
                        startPage = self.pageTotalCount-1 - self.options.pageShowCount + 1;
                        endPage = self.pageTotalCount-1;
                    }else{
                        startPage = currPageNum - pageShowMidCount + 1;
                        endPage = currPageNum + pageShowMidCount;
                    }    
                }else{
                    if((currPageNum + 1 - pageShowMidCount) <= 0){       //首页
                        startPage = 0;
                        endPage = self.options.pageShowCount-1;
                    }else if((currPageNum + 1 + pageShowMidCount - 1) >= self.pageTotalCount){            //尾页
                        startPage = self.pageTotalCount-1 - self.options.pageShowCount + 1;
                        endPage = self.pageTotalCount-1;
                    }else{
                        startPage = currPageNum - pageShowMidCount + 1;
                        endPage = currPageNum + pageShowMidCount - 1;
                    }    
                }    
            }
            
            //显示首页尾页
            if(self.options.showFirstPageBtnAndLastPageBtn == true){
                firstPageHtml = '<li>首页</li>';
                lastPageHtml =     '<li>尾页</li>';    
            }
            //显示上一页下一页
            if(self.options.showPrevBtnAndNextBtn == true){
                if(currPageNum != 0) prevPageHtml = '<li>上一页</li>';       //首页不显示上一页
                if(currPageNum != self.pageTotalCount-1) nextPageHtml = '<li>下一页</li>';      //尾页不显示最后一页
            }
            //显示页码数字链接
            for(var i=startPage,l=endPage;i<=l;i++){
                if(currPageNum==i){
                    pageLinkHtml += '<li class="j-curr">' + (i+1) + '</li>';
                }else{
                    pageLinkHtml += '<li>' + (i+1) + '</li>';
                }
            }
            //显示页码提示信息
            if(self.options.showPageNumTips == true){
                pageTips = '<span>' +(currPageNum+1) + '/' + self.pageTotalCount + '</span>';
            }
            //拼出页码元素的整体内容
            self.pagerBox.innerHTML = firstPageHtml + prevPageHtml + pageLinkHtml + nextPageHtml + lastPageHtml + pageTips;    

            var elems = T$$(self.pagerBox,'li');
            $each(elems, function(o, i) {
                o.onclick = function() {
                    if(o.innerText == '首页'){
                        self.showChangeElemCont(0);
                        self.showChangePageCont(0);
                    }else if(o.innerText == '尾页'){
                        self.showChangeElemCont(self.pageTotalCount-1);
                        self.showChangePageCont(self.pageTotalCount-1);
                    }else if(o.innerText == '上一页'){
                        self.showChangeElemCont(currPageNum-1);
                        self.showChangePageCont(currPageNum-1);
                    }else if(o.innerText == '下一页'){
                        self.showChangeElemCont(currPageNum+1);
                        self.showChangePageCont(currPageNum+1);
                    }else{
                        index = parseInt(o.innerText) - 1;
                        self.showChangeElemCont(index);
                        self.showChangePageCont(index);
                    }        
                }
            });
        }
    };
    
    return{
        onShowPage:function(bid,pid,options){
            //调用主类
            var st = new showPage(bid,pid,options);
            st.showChangeElemCont(0);
            st.showChangePageCont(0);
        }
    }
}();

pager.onShowPage('list','pager',{elemShowCount:4,pageShowCount:5});
</script>
</body>
</html>

然后填充内容和样式：(修改css和js以及html)

实例：

css:

#pager {
  margin:50px auto;
  text-align:center;
  line-height:26px;
}
#pager li  {
  display:inline-block;
  min-width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 5px;
  cursor:pointer;
  color: #999;
  background-color: #fff;
  border: 1px solid #f6f6f6;
}
#pager span {
    color: #999;
    margin-left: 5px;
}
.j-curr{
  color:#fff !important;
  background-color: #16ab95 !important;
}
.messageMain {
    background-color: #fff;
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
}
figure {
    overflow: hidden;
    width: 360px;
    font-size: 14px;
    color: #333;
    position: relative;
    margin: 0 20px 20px;
}
figure img {
    width: 150px;
    height: 100px;
    float: left;
    margin-right: 18px;
}
figcaption {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin-top: 2px;
}
figcaption {
    float: left;
    width: 192px;
    color: #333;
}
figcaption:hover {
    color: #16ab95;
/*    cursor:pointer;*/
}
figure>span {
    position: absolute;
    left: 168px;
    bottom: 2px;
    color: #999;
}

js:

var pager = function(){
    //公共函数
    function T$(id){
        return document.getElementById(id);
    }
    function T$$(root,tag){
        return (root || document).getElementsByTagName(tag);
    }
    function $extend(object1,object2){
        for(var p in object2){
            object1[p] = object2[p];
        }
        return object1;
    }
    function $each(arr, callback, thisp) {
        if (arr.forEach){
            arr.forEach(callback, thisp);
        }else{
            for(var i = 0, len = arr.length; i < len; i++){
                callback.call(thisp, arr[i], i, arr);
            }
        }
    }
    
    //默认参数配置
    var defaultOptions = {
        elemShowCount:5,     //每页显示条数，默认为5条
        pageShowCount:4,     //显示的页码数目，默认显示4个页码
        showFirstPageBtnAndLastPageBtn:true,     //是否显示首页，尾页，默认显示
        showPrevBtnAndNextBtn:true,    //是否显示上一页，下一页，默认显示
        showPageNumTips:true,      //是否显示【1/7页】页面提示，默认显示
        showPageNum:true      //是否显示分页的数字，默认显示
    };
    
    //主类构造函数 参数说明：bid为元素容器div的ID,pid为分页容器div的ID,options为重写的默认配置参数
    var showPage = function(bid,pid,options){   
        var self = this;             
        if(!(self instanceof showPage)){
            return new showPage(bid,pid,options);
        }
        self.container = T$(bid);    //元素容器div
        self.pagerBox = T$(pid);    //翻页容器div
        if(!self.container){
            return;                     
        }
        self.options = $extend(defaultOptions,options||{});
        self.elem = T$$(self.container,'figure');     //需要分页的元素
        self.elemTotalCount = self.elem.length || 0;    //分页元素的总个数
        self.pageTotalCount = Math.ceil(self.elemTotalCount/self.options.elemShowCount) || 0;   //总页数
    };
    
    showPage.prototype = {
        constructor:showPage,
        //显示当页的元素内容，参数currPageNum为当前页码，从0开始
        showChangeElemCont: function(currPageNum){                     
            var self = this;     //this为showPage对象
            var nextPageCount = (currPageNum+1)*self.options.elemShowCount < self.elemTotalCount ? (currPageNum+1)*self.options.elemShowCount : self.elemTotalCount;     //判断为最后一页时，最后一页应该显示的数据条数
            for(var i=0;i<self.elemTotalCount;i++){
                self.elem[i].style.display = 'none';
            }
            for(var i=currPageNum*self.options.elemShowCount,l=nextPageCount;i<l;i++){
                self.elem[i].style.display = 'block';
            }
        },
        //显示当页的页码内容，参数currPageNum为当前页码，从0开始
        showChangePageCont: function(currPageNum){                      
            var self = this;      //this为showPage对象
            var firstPageHtml = prevPageHtml = pageLinkHtml = nextPageHtml = lastPageHtml = pageTips = '';     //firstPageHtml:首页   prevPageHtml:上一页  pageLinkHtml:页码表   nextPageHtml:下一页  lastPageHtml:尾页   pageTips:页码提示
            var startPage,endPage;        //startPage:页码列表中的第一页   endPage:页码列表中的最后一页
            var pageShowMidCount = Math.ceil(self.options.pageShowCount/2);      //页码中间值，当超过这个值时，页码列表发生变化
            if(self.pageTotalCount <= self.options.pageShowCount){           //总页码数小于等于默认要显示的页码数时，直接在当前页面显示全部的页码
                startPage = 0;
                endPage = self.pageTotalCount-1;
            }else{
                if(self.options.pageShowCount%2 == 0){
                    if((currPageNum + 1 - pageShowMidCount) <= 0){       //首页
                        startPage = 0;
                        endPage = self.options.pageShowCount-1;
                    }else if((currPageNum + 1 + pageShowMidCount) >= self.pageTotalCount){            //尾页
                        startPage = self.pageTotalCount-1 - self.options.pageShowCount + 1;
                        endPage = self.pageTotalCount-1;
                    }else{
                        startPage = currPageNum - pageShowMidCount + 1;
                        endPage = currPageNum + pageShowMidCount;
                    }    
                }else{
                    if((currPageNum + 1 - pageShowMidCount) <= 0){       //首页
                        startPage = 0;
                        endPage = self.options.pageShowCount-1;
                    }else if((currPageNum + 1 + pageShowMidCount - 1) >= self.pageTotalCount){            //尾页
                        startPage = self.pageTotalCount-1 - self.options.pageShowCount + 1;
                        endPage = self.pageTotalCount-1;
                    }else{
                        startPage = currPageNum - pageShowMidCount + 1;
                        endPage = currPageNum + pageShowMidCount - 1;
                    }    
                }    
            }
            
            //显示首页尾页
            if(self.options.showFirstPageBtnAndLastPageBtn == true){
                firstPageHtml = '<li>首页</li>';
                lastPageHtml =     '<li>尾页</li>';    
            }
            //显示上一页下一页
            if(self.options.showPrevBtnAndNextBtn == true){
                if(currPageNum != 0) prevPageHtml = '<li><</li>';       //首页不显示上一页
                if(currPageNum != self.pageTotalCount-1) nextPageHtml = '<li>></li>';      //尾页不显示最后一页
            }
            //显示页码数字链接
            for(var i=startPage,l=endPage;i<=l;i++){
                if(currPageNum==i){
                    pageLinkHtml += '<li class="j-curr">' + (i+1) + '</li>';
                }else{
                    pageLinkHtml += '<li>' + (i+1) + '</li>';
                }
            }
            //显示页码提示信息
            if(self.options.showPageNumTips == true){
                pageTips = '<span>' +(currPageNum+1) + '/' + self.pageTotalCount + '</span>';
            }
            //拼出页码元素的整体内容
            self.pagerBox.innerHTML = firstPageHtml + prevPageHtml + pageLinkHtml + nextPageHtml + lastPageHtml + pageTips;    

            var elems = T$$(self.pagerBox,'li');
            $each(elems, function(o, i) {
                o.onclick = function() {
                    if(o.innerText == '首页'){
                        self.showChangeElemCont(0);
                        self.showChangePageCont(0);
                    }else if(o.innerText == '尾页'){
                        self.showChangeElemCont(self.pageTotalCount-1);
                        self.showChangePageCont(self.pageTotalCount-1);
                    }else if(o.innerText == '<'){
                        self.showChangeElemCont(currPageNum-1);
                        self.showChangePageCont(currPageNum-1);
                    }else if(o.innerText == '>'){
                        self.showChangeElemCont(currPageNum+1);
                        self.showChangePageCont(currPageNum+1);
                    }else{
                        index = parseInt(o.innerText) - 1;
                        self.showChangeElemCont(index);
                        self.showChangePageCont(index);
                    }        
                }
            });
        }
    };
    
    return{
        onShowPage:function(bid,pid,options){
            //调用主类
            var st = new showPage(bid,pid,options);
            st.showChangeElemCont(0);
            st.showChangePageCont(0);
        }
    }
}();

pager.onShowPage('list','pager',{elemShowCount:8,pageShowCount:5});

html:

            <!-- 分页 -->
            <div class="messageMain"  id="list">
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>1发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>2发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>3发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>4发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>5发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>6发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>7发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>8发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>9发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>10发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>11发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>12发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>13发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>1发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>2发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>3发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>4发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>5发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>6发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>7发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>8发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>9发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>10发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>11发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>12发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
                <figure>
                    <a href="#"><img src="img/education.png" alt=""></a>
                    <a href="#"><figcaption>13发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
                    <span>2018/07/17</span>
                </figure>
            </div>
            <div id="pager"></div>

猜你喜欢

转载自www.cnblogs.com/-rainbow-/p/9479986.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022