js瀑布流

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

猜你喜欢