<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #ededed;
}
.s-par {
position: relative;
width: 1090px;
height: auto;
margin: auto;
background: #fff;
}
.smallimg {
position: absolute;
width: 100px;
box-shadow: 0 0 5px grey;
}
</style>
</head>
<body>
<script>
/*
* 图片的瀑布流
* */
var img = ["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", "15.jpg"];
//默认显示50张图片
var num = 50;
var hrow = 10;
var max = 0;
var spar = document.createElement("div");
spar.className = "s-par";
document.body.appendChild(spar);
var small = document.getElementsByClassName("smallimg");
//创建图片
createImage();
function createImage() {
for (var i = 0; i < num; i++) {
var imglist = document.createElement("img");
imglist.className = "smallimg";
//随机数组里面随机路径
//Math.floor 向下取整 Math.random() 随机0-1 取小不取大 *10
imglist.src = "./img/" + img[Math.floor(Math.random() * img.length)];
//设置left属性
var x = i % hrow * 100 + i % hrow * 10;
imglist.style.left = x + "px";
spar.appendChild(imglist);
}
}
//屏幕大小变化事件
window.onresize = function () {
var sw = document.documentElement.clientWidth;
if (sw < 1000) {
hrow = 5;
spar.style.width = "650px"
this.onresize = null;
}
else {
hrow = 10;
}
spar.innerHTML = "";
//创建图片
createImage();
setOffsetT(0);
}
window.onload = function () {
setOffsetT(0);
//绑定一个滚动条事件
this.addEventListener("scroll", function (e) {
if (this.scrollY + document.documentElement.clientHeight >= document.body.offsetHeight - 20) {
createImage();
setOffsetT(small.length - num);
}
})
}
function setOffsetT(start) {
//在加载完成之后 获取offsetHeight
for (var i = start; i < small.length; i++) {
var offestT = i >= hrow ? small[i - hrow].offsetHeight + 10 + small[i - hrow].offsetTop : 0;
small[i].style.top = offestT + "px";
if (small[i].offsetHeight + offestT > max) {
max = small[i].offsetHeight + offestT;
}
}
spar.style.height = max + "px";
}
</script>
</body>
</html>
瀑布流
最新推荐文章于 2024-01-20 15:45:35 发布