动态加载图片布局优化-优快云博客

本文链接：https://blog.youkuaiyun.com/Anoddguy/article/details/81005810
	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<script src="js/twodogs.js"></script>
		<script>
			var div=document.getElementsByTagName('div');
			var body=document.getElementsByTagName('body')[0];
			var limit=body.offsetHeight;//取到开始的body的高度，作为判断条件
			ajax('get','getPics.php',true,'cpage=1',function(para){//ajax是自己封装的方法
				var Json=JSON.parse(para);//解析php文件里的字符串
				var arr=[];//创建数组放置Json对象的图片元素
				var Range=[];//创建数组放置div节点
				for(x in Json){
					arr.push(Json[x]);
				}
				for(var i=0;i<div.length;i++){
					Range.push(div[i]);
				}
				for(var i=0;i<arr.length;i++){//开始给div加图片
					Range.sort(function(x,y){//对节点进行排序，按照offsetHeight进行排序
						return x.offsetHeight-y.offsetHeight;
					});
					var img=document.createElement('img');//创建img对象
					img.style.width='300px';//设置和div一样的宽度
					img.style.height=(arr[i].height/arr[i].width)*300+'px';//按照原来的大小等比例放大
					img.src=arr[i].image;//添加img标签的src属性
					Range[0].appendChild(img);//给offsetHeight最小的div节点添加img
					//当最高的div超过body的高度时，停止加载
                                        if(Range[0].offsetHeight>limit||Range[3].offsetHeight>limit){
						obj={index:i};//保存i的值，这样子不会重复加载
						break;
					}
				}
				window.onscroll=function(ev){
					var e=ev||window.event;
                                        //滚动条在Y轴上移动的距离
					var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;					                var scroll=document.documentElement.scrollHeight||document.body.scrollHeight;//body的高度
					var height=document.documentElement.clientHeight||document.body.clientHeight;//可视区域的高度
					if(scrollTop +height==scroll){//判断滚动条到底部
						body.style.height=body.offsetHeight+300+'px';//到底部时，改变body的高度，增加300
						limit=body.offsetHeight+300;//同时给判断条件也增加
						for(var j=obj.index;j<arr.length;j++){//以下同上
							Range.sort(function(x,y){
								return x.offsetHeight-y.offsetHeight;
							});
							var img=document.createElement('img');
							img.style.width='300px';
							img.style.height=(arr[i].height/arr[i].width)*300+'px';
							img.src=arr[j].image;
							Range[0].appendChild(img);
							if(Range[0].offsetHeight>limit||Range[3].offsetHeight>limit){
								obj.index=j+1;
								break;
							}
							if(j==49){//判断如果加载完了图片，就取消滚动事件
								window.onscroll=null;
							}
						}
					}

				}
			})
		</script>
	</body>
瀑布流布局
