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>
