ajax/php/javascript实现简单的图片瀑布

最新推荐文章于 2019-06-15 14:17:07 发布

less_cold

最新推荐文章于 2019-06-15 14:17:07 发布

阅读量273

点赞数

分类专栏： ajax和php

本文链接：https://blog.csdn.net/less_cold/article/details/52326027

版权

ajax和php 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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代码和上一篇文章一样