json是JavaScript对象表示法,是轻量级的文本数据交换格式;属性与属性之间用逗号分开;属性与属性值之间用冒号分开。
json只能用双引号。
data[0].src
data[2].title
追加条件:最后一个盒子的top值+其高度<document高度值+滚动条滚动的值
<script>
//模拟数据
var data=[{
"src":"picOne.jpg",
"title":"第一怪 竹筒当烟袋"
},{
"src":"picTwo.jpg",
"title":"第二怪 竹筒当烟袋"
}]
var waterfall=function(wrap,boxes){
//获取屏幕可以显示的列数
var boxWidth=boxes.eq(0).width()+40;
var windowWidth=$(window).width();
var colsNumber=Math.floor(windowWidth / boxWidth);
//设置容器的宽度
wrap.width(boxWidth*colsNumber);
//定义一个数组并存储每一列的高度
var everyHeight=new Array();
for(var i=0;i<boxes.length;i++){
if(i<colsNumber){
everyHeight[i]=boxes.eq(i).height()+40;
}else{
var minHeight=Math.min.apply(null,everyHeight);
var minIndex=getIndex(minHeight,everyHeight);
var leftValue=boxes.eq(minIndex).position().left;
setStyle(boxes.eq(i),minHeight,leftValue,i);
//更新最小列的高度
everyHeight[minIndex]+=boxes.eq(i).height()+40;
};
//鼠标经过图片呈现半透明的交互效果
boxes.eq(i).hover(function(event){
$(this).stop().animate({
'opacity':'0.5'
},500);
},function(event){
$(this).stop().animate({
'opacity':'1'
},1000);
});
};
};
//获取最小列的索引
function getIndex(minHeight,everyHeight){
for(index in everyHeight){
if(everyHeight[index]==minHeight){
return index;
}
};
};
//是否追加。数据请求校验
var getCheck=function(wrap){
//获取文档高度
var documentHeight=$(window).height();
//获取文档向上滚动的高度
var scrollHeight=$(window).scrollTop();
//获取最后一个盒子所在列的总高度
var boxes=wrap.children('div');
var lastBoxTop=boxes.eq(boxes.length-1).offset().top;
var lastHeight=boxes.eq(boxes.length-1).height()+20;
var lastColHeight=lastBoxTop+lastHeight;
return documentHeight+scrollHeight>=lastColHeight?true:false;
}
//设置追加盒子的样式 减少刷新量
var getStartNumber=0;
var setStyle=function(box,top,left,index){
if(getStartNumber>=index){
return false;
};
box.css({
'position':'absolute',
'top':top,
'left':left,
'opacity':'0'
}) .stop().animate({/*第二行慢慢出来的动画*/
'opacity':'1'
},1000);
getStartNumber=index;
};
//追加盒子函数:
/*function appendBox(){};*/
//更偏向函数型的全局变量
var appendBox=function(wrap,boxes){
if(getCheck(wrap)){
for(i in data){
var innerString='<div><img src="images/'+data[i].src+'"/><a href="http://www.imooc.com">'+data[i].title+'</a></div>';
wrap.append(innerString);
};
}else{
return false;
};
waterfall(wrap,wrap.children('div'));
};
$(document).ready(function(event){
//获取容器与盒子
var wrap=$('#wrap');
var boxes=$('#wrap').children('div');
//加载盒子
waterfall(wrap,boxes);
$(this).scroll(function(event){
appendBox(wrap,boxes);
})
/* $(document).scroll(function(event){
alert(this);
})*/
});
</script>
//鼠标在图片上透明
boxes.eq(i).hover(function(event){
$(this).stop().animate({
'opacity':'0.5'
},500);
},function(event){
$(this).stop().animate({
'opacity':'1'
},1000);
});
};