js瀑布流

最新推荐文章于 2025-06-16 11:18:51 发布

caaaaaaaai

最新推荐文章于 2025-06-16 11:18:51 发布

阅读量197

点赞数

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.youkuaiyun.com/weixin_42413684/article/details/81006528

<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>