html代码如下
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="gb2312">
<title>很多图片的</title>
<script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>
<link href="pagebar.css" rel="stylesheet" type="text/css" />
</head>
<html lang="en">
<div id="container"></div>
<script type="text/javascript">
$(function(){
str=3;
$.ajax({
type: "GET",
url: 'mpicture.php',
dataType: "json", //数据格式:JSON
data: {'page':str
},
success: function (data) {
var html='';
var path1=eval(data)[0];
for(i=0;i<3;i++){//这里的3是一页显示多少条
id=i+1;
html = html+'<div><img src="'+eval(data)[0][i]+'" id="'+id+'"style="height:200px,width:200px"/><p>'+eval(data)[2][i]+'</p><img src=""/>';
}
$("#container").append(html);
//document.write(html);
//var totleheight=200*3+18*3;
//var scrollTop = document.body.scrollTop+document.documentElement.scrollTop;//这两个值只有一个会生效
//var windowheight = document.documentElement.clientHeight+document.body.clientHeight;
//alert(windowheight);
}
});
}).scroll(function(){
var totleheight=220*3+18*3;//后面这几个量没有单位
var scrollTop = document.body.scrollTop+document.documentElement.scrollTop;//对象最顶端和窗口中可见内容的最顶端之间的距离,这两个值只有一个会生效
var windowheight = document.body.clientHeight;
if(scrollTop>238){
n=scrollTop/238;
for(i=1;i<=n;i++){
// var img=document.getElementById("i");
// img.style.display = "none";
//img.parentNode.removeChild(img);
$("#i").remove();
}
}
//var html='';
//html = html+'<div><p>'+scrollTop+'</p>';
//$("#container").append(html);
//var scrollTop = document.documentElement.scrollTop > document.body.scrollTop? document.documentElement.scrollTop : document.body.scrollTop;
if (scrollTop >=windowheight-totleheight) {
str=str+1;
//alert(str);
window.onscroll = null;//为防止重复执行,先清除事件
$.ajax({type: "GET",
url: 'mpicture.php',
dataType: "json", //数据格式:JSON
data: {'page':str
},
success: function (data) {
var html='';
path1=eval(data)[0];
title=eval(data)[2];
id=eval(data)[3];
for(i=0;i<1;i++){//这里的2是一页显示多少条
html = html+'<div><img src="'+path1[i]+'" id="'+id[i]+'"style="height:200px,width:200px"><p>'+title[i]+'</p><p>'+scrollTop+'</p>';
}
$("#container").append(html);
//document.write(html);
}
}
)
}
})
</script>
</html>
PHP代码和上一篇文章一样