- *{
- margin: 0;
- padding: 0;
- }
- li{
- list-style: none;
- width:48%;
- height:100px;
- text-align: center;
- line-height: 100px;
- background: gainsboro;
- margin:1.3% 1% 0 1%;
- float:left;
- }
html 部分
- <ul id="ul">
- </ul>
- <div>
- <button id="btn" style="width:93%;height: 50px;background: pink;margin-left:3.5%;margin-top:30px;">
- 点击加载更多
- </button>
- </div>
JS 部分
- var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27];// 数据数组
- var oul = document.getElementById('ul');
- var obtn = document.getElementById('btn');
- // 获取 DOM 节点
- var str = '';// 存储数据的内容
- var num1 = 1;// 数据页数
- var num = 8;// 点击添加几个
- for(var i = 0;i <num; i++){
- str += '<li>' + arr[i] + '</li>';// 首次数据显示
- }
- var num2 = Math.ceil(arr.length/num);// 获取数据总页数
- oul.innerHTML = str;// 添加到页面上
- obtn.onclick = function(){
- str = ''; // 让页面为空
- num1++;// 页数 ++
- if(num1 == num2){// 判断
- num = num + 8;
- var num3 = Math.abs(arr.length - num1 * 8);//5
- num = num - num3;
- obtn.style.display = 'none';
- }else{
- num = num + 8;
- }
- for(var i = 0;i <num; i++){// 加载更多数据
- str += '<li>' + arr[i] + '</li>';
- }
- oul.innerHTML = str;
- }
- // 觉得有用的话, 点个赞. 写的比较简单
来源: http://www.bubuko.com/infodetail-2932014.html