jQuery:图片的数据流
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
html,body{
background-color: #5c5c5c;
}
.block{
position: relative;
width: 840px;
margin: 0 auto;
border: 1px solid white;
}
.bchild{
position: absolute;
width: 200px;
float: left;
background-color: white;
border-radius: 5px;
margin: 0 5px;
}
.imglist{
width: 180px;
margin: 10px;
}
</style>
</head>
<body>
<div class="block">
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
var list=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg","13.jpg"];
showimage(list);
$(document).bind("scroll",function(){ //bind()相当于addlistener
/*$(window).height()代表了当前可见区域的大小*/
/* $(this).scrollTop)获取垂直滚动的距离(即当前滚动的地方的窗口顶端到整个页面顶端的距离)*/
if($(window).height()+$(this).scrollTop()>=$(document).height()-20){
var newlist=[list[Math.floor(Math.random()*list.length)],list[Math.floor(Math.random()*list.length)],list[Math.floor(Math.random()*list.length)],list[Math.floor(Math.random()*list.length)]]//从上述图片中产生随机图片
showimage(newlist);
}
})
function showimage(obj){
obj.forEach(function(res,index){ //数组的foreach方法
var bo=$("<div class='bchild'></div>");
var img=$("<img class='imglist'>");
img.attr("src","./img/"+res);//设置属性
bo.append(img);//追加属性
$(".block").append(bo)
});
//遍历所有
$(".bchild").each(function(index){
if(index<4){
$(".bchild").eq(index).css("top",10);//设置css属性
}
else{
$(".bchild").eq(index).css({
"top":$(".bchild").eq(index-4)[0].offsetHeight+$(".bchild").eq(index-4)[0].offsetTop+10 //给后面加[0],获取到标签
})
}
$(".bchild").eq(index).css("left",index%4*210)
})
$(".block").css("height",$(document).height());//$(document).height()代表整个文档的告诉
}
</script>
</body>
</html>