<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style>
.box {
margin: 100px auto;
width: 590px;
}
ul {
height: 165px;
}
ul li {
margin-right: 10px;
margin-top: 25px;
text-align: center;
width: 122px;
height: 121px;
list-style: none;
float: left;
}
.clear{
clear: both;
}
.load{
text-align: center;
display: none;
}
</style>
<script type=”text/javascript” src=”js/jquery-1.11.0.js”></script>
</head>
<body>
<div class=”box”>
<ul>
<!–<li><img src=”img/a1.jpg”></li>
<li><img src=”img/a10.jpg”></li>
<li><img src=”img/a11.jpg”></li>
<li><img src=”img/a12.jpg”></li>–>
</ul>
<div class=”clear”></div>
<div class=”load”>
<img src=”img/ajax-loader.gif” />
</div>
<div class=”more” style=”text-align: center;”>
<button class=”btn” style=”margin-top: 40px;”>查看更多图片</button>
</div>
</div>
<script>
var num = 0
var start = 0
var size = 4
$.ajax({
url: “data/new4.json”,
type: “get”,
success: function(res) {
var str = “”
for(var i = 0; i < 4; i++) {
str += “<li><img src=” + res[i].img + “>” + res[i].title + “</li>”
}
$(“.box ul”).append(str)
}
})
$(“.btn”).click(function() {
$(“.load”).show()
setTimeout(function() {
$(“.load”).hide()
num++
start = num * size
$.ajax({
url: “data/new4.json”,
type: “get”,
success: function(res) {
var sum = res.length
if(start + size > sum) {
size = sum – start
$(“.btn”).html(“没有更多了”)
}
var str = “”
for(var i = start; i < (start + size); i++) {
str += “<li><img src=” + res[i].img + “>” + res[i].title + “</li>”
}
console.log(start + size)
$(“ul”).append(str)
}
})
}, 1000)
})
</script>
</body>
</html>
json：
[
{“img”:”img/a1.jpg”,”title”:”百度音乐”},
{“img”:”img/a10.jpg”,”title”:”百度音乐”},
{“img”:”img/a11.jpg”,”title”:”百度音乐”},
{“img”:”img/a12.jpg”,”title”:”百度音乐”},
{“img”:”img/a13.jpg”,”title”:”百度音乐”},
{“img”:”img/a14.jpg”,”title”:”百度音乐”},
{“img”:”img/a15.jpg”,”title”:”百度音乐”},
{“img”:”img/a16.jpg”,”title”:”百度音乐”},
{“img”:”img/a2.jpg”,”title”:”百度音乐”},
{“img”:”img/a3.jpg”,”title”:”百度音乐”},
{“img”:”img/a4.jpg”,”title”:”百度音乐”},
{“img”:”img/a5.jpg”,”title”:”百度音乐”},
{“img”:”img/a6.jpg”,”title”:”百度音乐”},
{“img”:”img/a7.jpg”,”title”:”百度音乐”},
{“img”:”img/a8.jpg”,”title”:”百度音乐”},
{“img”:”img/a9.jpg”,”title”:”百度音乐”}
]
