假設需要加載3組圖片，圖片高度分別為
[20,10,30,40,50]
[60,90,70,80,100]
[100,100,100,100,100]對于第一排
第一排直接顯示就可以了，當前高度陣列為 [20,10,30,40,50]
對于第二排
先考慮第1張，高60，而上一排最小高度為10，在第 2 列，所以把這張排到第 2 列，更新高度陣列為[20，10+60，30，40，50]
第2張，高90，現在最小高度為20，在第 1 列，所以把這張排到第1列，更新高度陣列為[20+90，70，30，40，50]
第3張，高70，現在最小高度為30，在第 3 列，所以把這張排到第3列，更新高度陣列為[110，70，30+70，40，50]
....類推
示例代碼
for (let i = 0; i < 15; i++) { //先定它個15個div
var div = document.createElement("div");
div.className = "item";
div.style.height = i * 10 + 10 + "px"; //假設圖片高度,要替換成實際圖片高度 ，
document.body.appendChild(div);
}
var heightArray = [], //存盤每列的高度，
columns = 5; //假設為5列;
for (let i = 0; i < 15; i++) {
// 遍歷所有div，對他們設定left和top值
var currentDiv = document.getElementsByClassName("item")[i];
if (i < columns) { //i<columns說明為第一排
currentDiv.style.top = 0; //第一排top值為0
currentDiv.style.left = i * 100 + "px"; // 第一張left:0,第二張left:100...
heightArray[i] = currentDiv.offsetHeight; // 第1排直接設定
} else {// 非第1排
var minHeight = Math.min.apply(null, heightArray); //找到高度最小值
var minIndex = heightArray.indexOf(minHeight); //找到最小值所在列
currentDiv.style.top = minHeight + "px"; // 設定top值
currentDiv.style.left = minIndex * 100 + "px"; //設定left值
heightArray[minIndex] += currentDiv.offsetHeight; // 更新高度陣列，
}
}css:
body {
position: relative;
}
.item {
margin: 20px;
width: 100px;
border: 1px solid red;
position: absolute;
box-sizing: border-box;
}效果：
隨機高度：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/198264.html
標籤：AI