css部分

*{
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;
}

// 覺得有用的話,點個贊. 寫的比較簡單

原生js點擊按鈕加載更多數據