<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图片瀑布流1</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color: cornsilk;
}
.block{
position: relative;
margin:auto;
width:870px;
height: auto;
background-color: white;
}
.divlist{
position: absolute;
width:100px;
height:auto;
}
.divlist>img{
width:100%;
height:auto;
box-shadow: 0 0 8px black;
}
</style>
</head>
<body>
<script src="./js/图片瀑布流1.js"></script>
</body>
</html>
/**
* Created by Administrator on 2019/5/9.
*/
var block=document.createElement("div");
block.className="block";
document.body.appendChild(block);
var count=8;
var image=["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","14.jpg"];
var startimage=48;
var bgheight=0;
var imager=[];
var pageimage=16;
var pageindex=0;
DivCreat(startimage);
window.onload=function(){
offset(pageindex);
};
window.onscroll=function(){
if(window.innerHeight+dealfirefoxscroll()>document.body.clientHeight-50){
pageindex=startimage;
startimage+=pageimage;
DivCreat(pageimage);
offset(pageindex);
}
};
function dealfirefoxscroll(){
return window.pageYOffset||document.documentElement.scrollTop;
}
function DivCreat(number){
for(i=0;i<number;i++){
var divlist=document.createElement("div");
var img=document.createElement("img");
divlist.className="divlist";
block.appendChild(divlist);
divlist.appendChild(img);
img.src="./img/"+image[Math.floor(Math.random()*image.length)];
imager.push(divlist);
}
}
function offset(index) {
for (i = index; i < imager.length; i++) {
imager[i].style.left = ((i % count) * (100 + 10)) + "px";
imager[i].style.top = (i - count) < 0 ? 0 : ((imager[i - count].offsetHeight + imager[i - count].offsetTop) + 10) + "px";
bgheight=bgheight-(imager[i].offsetHeight+imager[i].offsetTop)>0?bgheight:(imager[i].offsetHeight+imager[i].offsetTop);
block.style.height=bgheight+"px";
}
}