将宽度和高度随机分组的div尽可能紧密地结合在一起

Question

我不知道是否可以仅使用CSS和一些JavaScript来完成，就像我在下面尝试做的那样。有人说这是不可能的。我希望你能给我指路。

我想将宽度和高度随机的div尽可能紧密地包装在一起。我想创建一个约有100个div的序列，它们的宽度和高度都是随机的（在给定的值范围内是随机的），以便它们“浮动”在一起以创建尽可能少的空白。

这是主意。但这会在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

如果您可以在ID为display: flex;的div上使用container，而在子div（即类别为div的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;

希望这可能对您有帮助。