Как можно плотнее упаковывать блоки произвольной ширины и высоты вместе

Question

Я не знаю, можно ли это сделать просто с помощью CSS и немного JavaScript, как я пытаюсь сделать ниже. Некоторые люди говорят, что это невозможно. Надеюсь, вы покажете мне путь.

Я хочу как можно плотнее упаковать div произвольной ширины и высоты. Я хочу создать последовательность из примерно 100 блоков со случайной шириной и высотой (случайной в заданном диапазоне значений), чтобы они «плавали» вместе, создавая как можно меньше пробелов.

Вот идея. Но это создает много белого пространства между / между div, что нам не нужно.

init();

function init() {
  var n = 100;
  var minWidth = 20;
  var maxWidth = 50;
  var minHeight = 10;
  var maxHeight = 40;
  var container = document.getElementById("container");
  for (var i = 0; i < n; i++) {
    var width = randomInteger(minWidth, maxWidth);
    var height = randomInteger(minHeight, maxHeight);
    var div = document.createElement("div");
    div.classList.add("aDiv");
    div.style.width = width + 'px';
    div.style.height = height + 'px';
    var color = randomColor();
    div.style.backgroundColor = 'hsl(' + color.hue + ',' + color.saturation + '%,' + color.lightness + '%)';
    container.appendChild(div);
  }
}

function randomColor() {
  var hueCenter = 167;
  var hueRange = 25;
  var saturationCenter = 50;
  var saturationRange = 15;
  var lightnessCenter = 50;
  var lightnessRange = 20;
  var hue = randomInteger(hueCenter - hueRange, hueCenter + hueRange);
  var saturation = randomInteger(saturationCenter - saturationRange, saturationCenter + saturationRange);
  var lightness = randomInteger(lightnessCenter - lightnessRange, lightnessCenter + lightnessRange);
  return {
    hue: hue,
    saturation: saturation,
    lightness: lightness
  };

}

function randomInteger(min, max) {
  // Returns a random integer between min and max. 
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

.aDiv {
  display: inline-block;
  float: left;
}

<div id="container"></div>

Answer 1

Если вы можете использовать display: flex; в div с ID container без каких-либо дополнительных свойств в дочерних div (т.е. div s с классом aDiv), это поможет. Только CSS будет:

#container {
display: flex;
flex-wrap: wrap;
align-content: flex-end; //put the appropriate value to position your children divs
}

Здесь, в flexbox, свойство align-content является ключом. Он используется для выравнивания элементов с несколькими линиями.

Возможные значения:
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Надеюсь, это вам поможет.