<style>
.container {
width: 1200px;
margin: 0 auto;
position: relative;
}
.item {
float: left;
}
.item > img {
width: 350px;
padding: 20px;
}
.container::after {
display: block;
content: "";
clear: both;
}
</style>
</head>
<body>
<div class="container"></div>
<script>
// 服务器请求的数据
let imgarr = [
"./img/01.webp",
"./img/02.jpeg",
"./img/03.webp",
"./img/04.webp",
"./img/05.webp",
"./img/06.jpeg",
"./img/07.webp",
"./img/08.jpeg",
"./img/09.jpeg",
"./img/10.jpeg",
"./img/11.jpeg",
"./img/08.jpeg",
];
// 1.将数据渲染到页面上
let container = document.querySelector(".container");
let res = imgarr.map((ele) => {
return `<div class="item">
<img src=${ele} alt="">
</div>`;
});
container.innerHTML = res.join("");
window.onload = function () {
// 2.将图片显示为瀑布流
let allitem = document.querySelectorAll(".item");
let num = Math.floor(container.clientWidth / allitem[0].clientWidth);
let arr = [];
// 记录前三个的高度,记录下标
for (let i = 0; i < allitem.length; i++) {
if (i < num) {
arr.push(allitem[i].clientHeight);
} else {
// >=3 item元素
// 获取最矮的元素,获取最矮元素的下标
let min = arr[0];
let index = 0;
for (let j = 0; j < arr.length; j++) {
if (min > arr[j]) {
min = arr[j];
index = j;
}
}
// console.log(min, index);
allitem[i].style.position = "absolute";
allitem[i].style.top = min + "px";
allitem[i].style.left = allitem[i].clientWidth * index + "px";
arr[index] = arr[index] + allitem[i].clientHeight;
}
}
};
</script>
570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
