Suppose you need to load 3 Group pictures , The height of the pictures is
[20,10,30,40,50] [60,90,70,80,100] [100,100,100,100,100]
For the first row

It's OK to display it directly in the first row , The current height array is  [20,10,30,40,50]

For the second row

First consider 1 Zhang , high 60, The minimum height of the upper row is 10, In the 2 column , So put this one at number one 2 column , Update height array to [20,10+60,30,40,50]

The first 2 Zhang , high 90, Now the minimum height is 20, In the 1  column , So put this one at number one 1 column , Update height array to [20+90,70,30,40,50]

The first 3 Zhang , high 70, Now the minimum height is 30, In the 3  column , So put this one at number one 3 column , Update height array to [110,70,30+70,40,50]

.... reason by analogy

Sample code
for (let i = 0; i < 15; i++) { // Order it first 15 individual div var div =
document.createElement("div"); div.className = "item"; div.style.height = i *
10 + 10 + "px"; // Assumed image height , To replace with actual picture height . document.body.appendChild(div); } var
heightArray = [], // Stores the height of each column . columns = 5; // Suppose it is 5 column ; for (let i = 0; i < 15; i++)
{ // Traverse all div, Set them up left and top value var currentDiv =
document.getElementsByClassName("item")[i]; if (i < columns) {
//i<columns The description is the first row currentDiv.style.top = 0; // first row top The value is 0 currentDiv.style.left =
i * 100 + "px"; // The first one left:0, The second one left:100... heightArray[i] =
currentDiv.offsetHeight; // The first 1 Row direct setting } else {// No 1 Row var minHeight =
Math.min.apply(null, heightArray); // Minimum height found var minIndex =
heightArray.indexOf(minHeight); // Find the column with the minimum value currentDiv.style.top = minHeight +
"px"; // set up top value currentDiv.style.left = minIndex * 100 + "px"; // set up left value
heightArray[minIndex] += currentDiv.offsetHeight; // Update height array . } }
css:
body { position: relative; } .item { margin: 20px; width: 100px; border: 1px
solid red; position: absolute; box-sizing: border-box; }
effect :

Random height :

 

 

 

Technology
©2019-2020 Toolsou All rights reserved,
vue Changes in data Interface not updated Python realization js And Django Front and back interaction in the background JavaSwing To achieve a simple Lianliankan games C# Making a simplified version of calculator elementui Shuttle box el-transfer Display list content text too long JVM summary Regression of dependent variable order categories (R language )【C#】 The realization of student achievement information management system use css Design a simple style html login interface C language --------- Tetris ( source code )