瀑布流
2020-07-23 本文已影响0人
致自己_cb38
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
width: 100%;
height: 1000px;
position: relative;
margin: 0 auto;
}
li {
float: left;
}
img {
width: 270px;
}
</style>
<body>
<ul>
</ul>
</body>
<script type="text/javascript">
let ul = document.getElementsByTagName("ul");
let img = document.getElementsByTagName("img");
let imgArr = [
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=555017973,407000228&fm=26&gp=0.jpg",
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3080889333,2693485192&fm=26&gp=0.jpg",
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2395936970,3727705521&fm=26&gp=0.jpg",
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1687910366,1793078040&fm=26&gp=0.jpg",
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=630094282,3983681255&fm=26&gp=0.jpg",
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=572644504,2568239841&fm=26&gp=0.jpg"
]
let hArr = [];
window.onload = function() {
more();
setTimeout(() => {
position();
}, 100)
}
window.onscroll = function() {
// 页面总高度
let bodyHeight = document.documentElement.offsetHeight;
// 可视区高度
let windowHeight = document.documentElement.clientHeight;
//滚动条的高度
let srcollTop = document.documentElement.scrollTop || document.body.scrollTop;
let srcollH = document.body.scrollHeight;
// alert(srcollH);
// 触底加载图片
if (srcollTop + windowHeight >= srcollH - 20) {
more();
position();
};
}
// 加载更多图片
function more() {
for (let i = 0; i < 30; i++) {
// 随机图片
let imgSrc = imgArr[Math.floor(Math.random(0) * 6)];
// 插入图片
let li = document.createElement('li');
li.innerHTML = `<img src=${imgSrc}>`;
// li.firstChild.style.height = "200px"
ul[0].appendChild(li);
}
}
// 图片位置
function position() {
let width = document.documentElement.clientWidth || document.body.clientWidth;
let imgWidth = img[0].offsetWidth;
// 可视区域横轴可容纳图片张数
let num = Math.floor(width / imgWidth);
ul[0].style.width = num * imgWidth + 'px';
hArr = [];
for (let i = 0; i < img.length; i++) {
// 第一排图片无需定位，否则会叠加在一起
if (i < num) {
hArr.push(img[i].offsetHeight);
} else {
// 第一排最小图片高度
let minHeight = Math.min.apply(null, hArr);
// 第一排最小图片索引
let minHeightIndex = getLeft(minHeight);
img[i].style.position = "absolute";
img[i].style.top = minHeight + 'px';
img[i].style.left = minHeightIndex * imgWidth + 'px';
// 当前图片赋值后,需改变数组中最小高度,下一张图片才有值
hArr[minHeightIndex] += img[i].offsetHeight;
}
}
}
// 获取最小图片高度下标
function getLeft(minHeight) {
for (let i = 0; i < hArr.length; i++) {
if (hArr[i] == minHeight) {
return i;
}
}
}
</script>
</html>
