Suponga que es necesario cargar 3 juegos de imágenes y que las alturas de las imágenes son respectivamente
[20,10,30,40,50]
[60,90,70,80,100]
[100,100,100,100,100]Para la primera fila
Simplemente muestre la primera fila directamente, la matriz de altura actual es [20,10,30,40,50]
Para la segunda fila
Considere la primera, altura 60, y la altura mínima de la fila anterior es 10, en la segunda columna, así que organice esto en la segunda columna y actualice la matriz de altura a [20, 10 + 60, 30, 40, 50]
El segundo, la altura es 90, y la altura mínima ahora es 20, que está en la primera columna, así que organícelo en la primera columna y actualice la matriz de altura a [20 + 90, 70, 30, 40, 50]
El tercero, altura 70, ahora la altura mínima es 30, en la tercera columna, así que organícelo en la tercera columna, actualice la matriz de altura a [110, 70, 30 + 70, 40, 50]
....analogía
Código de muestra
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;
}efecto:
Altura aleatoria:
