js处理瀑布流布局，移动端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
font-size: 16px;
}
.box {
position: relative;
box-shadow: 0 0 3px #000;
height: auto;
margin: 10px;
}
.box>img {
position: absolute;
margin: 10px 10px 0px 0;
}
.box>img:nth-child(2n) {
margin-right: 0;
}
</style>
</head>
<body>
<!-- 瀑布流加载数据方案 -->
<div class="box">
</div>
<script>
//定义数组定义图片
var arr = ["./image/1.jpg", "./image/7.jpg", "./image/4.jpg", "./image/6.jpg", "./image/8.jpg", "./image/3.jpg",
"./image/2.jpg", "./image/5.jpg","./image/1.jpg", "./image/7.jpg", "./image/4.jpg", "./image/6.jpg", "./image/8.jpg", "./image/3.jpg",
"./image/2.jpg", "./image/5.jpg"
];
//获取box元素
var boxele = document.querySelector(".box");
var num = 2; //限制一行几个的
var pW = (boxele.clientWidth - 10) / num;
console.log(pW);
//准备渲染图片
var pubu = {
imageList: arr,
//初始化方法
init() {
//执行创建图片方法
this.createImage();
},
createImage() {
//假设一次性走8张
for (var i = 0; i < this.imageList.length; i++) {
//创建dom元素
var img = document.createElement("img");
boxele.appendChild(img);
img.src = this.imageList[i];
img.className = "face";
img.width = pW;
//图片默认是定位的关系
//在这里计算left top
img.style.left = (i % num * pW + (i % num * 10)) + "px";
img.style.top = "0px";
}
},
setTop() {
//设置元素的top值
var allface = document.getElementsByClassName("face");
for (var i = 0; i < allface.length; i++) {
//设置元素的top
//行的上一个元素
var topele;
var th = 0;
topele = i - num >= 0 ? allface[i - num] : null;
th = topele ? topele.offsetHeight + topele.offsetTop : 0;
console.log(th);
allface[i].style.top = (th) + "px";
}
}
}
//初始化界面
pubu.init();
//浏览器加载完成之后获取元素的高在去设置
window.onload = function () {
pubu.setTop();
}
//添加一个滚动条事件
var isshow = true;
document.addEventListener("scroll", () => {
if (isshow) {
console.log("测试");
// pubu.createImage();
// pubu.setTop();
isshow = false;
}
});
</script>
</body>
</html>
