Ajax异步实现瀑布流

最新推荐文章于 2021-08-05 14:19:35 发布

嘉嘉的读书笔记

最新推荐文章于 2021-08-05 14:19:35 发布

阅读量250

点赞数

分类专栏：【前端 ✌】

本文链接：https://blog.csdn.net/lairyi/article/details/90341526

版权

【前端 ✌】专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!--设置css样式--> 
<style>
body{margin:0;}
#ul{width:1080px;margin:100px auto 0;}
li{width:247px;list-style:none;float:left;margin-right:10px;}
li div{border:1px solid #000;padding:10px;margin-bottom:10px;}
li div img{width:225px;display:block;}
</style>

<!--引用了一个封装好的方法-->
<script src="ajax.js"></script>
<!--定义js中需要的数据-->
<script>
window.onload=function(data){
    //定义变量名称
	var ul=document.getElementById("ul1");
	var li=document.getElementById("li");
	var len=li.length;
	var page=1;
	var b=true;
	
	//调用方法；
	getList();
	//方法，url地址，返回的页数，回掉函数
	ajax('get','getpic.php','cpage='+page,function(data){
	    //利用反序列化，将服务器数据中的字符串转为对象
		var data=JSON.parse(data);
		if(!data.length){
			return;
			}
			//循环数据，显示li
		for(var i=0;i<data.length;i++){
			var div=document.createElement("div");
			var img=document.createElement("img");
			//获取图片的地址，用一个preview属性
			 img.src=data[i].preview;
			 //设置图片格式
			 img.style.width='225px';
			 img.style.height=data[i].height*(225/data[i].width)+'px';
			 img.style.height=data[i].height+'px';
			 //在div后添加新的结点
			 div.appendChild("img");
			 //创建p标签，并定义，获取p标签的内容
			var p=document.createElement("p");
			 p.innerHTML=data[i].title;
			 div.appendChild(p);
			 li[_index].appendChild(div);
			}
			
			b=true;
		});
		//该方法用于通过li高度来判定下张显示的图片插入的位置
		function getShort(){
			var index=0;
			//li下元素高度
			var ih=li[index].offsetHeight;
			for(var i=1;i<len;i++){
				if(li[i].offsetHeight<ih){
					index=i;
					ih=li[i].offsetHeight;
					}
				}
				return index;
			}
			//该方法用来实现鼠标滚动时加载数据
		window.onscroll=function(){
			var _index=getShort();
			var li=li[_index];
			var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
			if(getTop(li)+li.offsetHeight<document.documentElement.clientHeight+scrollTop){
			//通过b的真假值，判断是否要加载数据
				if(b){
			    b=false;
				page++;
				getList();
					}
				}
			}
	}
</script>

<body>
<ul id="ul1">
   <li></li>
   <li></li>
   <li></li>
</ul>
</body>

在这里插入图片描述
要点：

动态生成页面结构：其中，用来生成页面结构的所有数据都是有php文件形式的，因此需要用到ajax来获取数据，然后再对数据进行处理，生成页面结构，因为有的div内容不一样，高度不相同，为了防止有的li越来越长，而有的却较短，因此页面中的每一个新的div都会接在最短的li中，这样整个页面就会较为均衡的向下添加内容；
实现滚动加载效果：在前面的的基础上通过ajax实现动态加载。