javascript - 如何在列内随机创建网格和放置元素？

Question

我有一个用 js 和 css 创建的响应式网格。在网格的每一列内，我想放置元素(红色方 block )，但方 block 应该随机放置，并且只能放置在某些列内。有 50 列，假设我想在列内随机放置 20 个方 block ，这样方 block 就不会重叠。我如何以最好的方式实现这一目标？

js

var grid = document.getElementById("grid");

for(var i = 0; i < 50; i++) {
    var square = document.createElement("div");
    square.className = 'square';
    grid.appendChild(square);

    var child = document.createElement("div");
    child.className = 'child';
    square.appendChild(child);
}

fiddle

Answer 1

首先为每个方 block 添加一个 ID，然后生成一个 0 到 49 之间的随机数，以便能够访问这些方 block 。每次添加一个方 block 时，您都必须存储它的索引以检查它是否已被添加。直到添加 20 个方 block 才停止。

var field = document.getElementById("field");

for (var i = 0; i < 50; i++) {
  var square = document.createElement("div");
  square.className = 'square';
  square.id = 'square' + i;
  field.appendChild(square);
}

var squaresPlaced = []; // Stores the squares index placed

while (squaresPlaced.length < 20) { // Stop only if 20 squares is added
  var randomIndex = parseInt(49 * Math.random()); // Generate a random number between 0 and 49

  // Only add the square if it doesn't exist already
  if (squaresPlaced.indexOf(randomIndex) === -1) {
    squaresPlaced.push(randomIndex);
    document.getElementById('square' + randomIndex).style.borderColor = 'red';
  }
}

html,
body {
  margin: 0;
  height: 100%;
}

#field {
  width: 60vw;
  height: 60vw;
  margin: 0 auto;
  font-size: 0;
  position: relative;
}

#field>div.square {
  font-size: 1rem;
  vertical-align: top;
  display: inline-block;
  width: 10%;
  height: 10%;
  box-sizing: border-box;
  border: 1px solid #000;
}

#field>div.circle {
  font-size: 1rem;
  vertical-align: top;
  display: inline-block;
  width: 10%;
  height: 10%;
  box-sizing: border-box;
  border: 1px solid #f00;
  border-radius: 100px;
}

<div id="field"></div>