Question

我有一个用js和css创建的响应式网格。在网格的每一列中，我想放置元素（红色方块），但是方块应该随机放置，只在一些列内。有50列，所以假设我想在列中随机放置20个正方形，这样正方形就不会重叠。我如何以最佳方式实现这一目标？

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

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

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>

Answer 2

答案更新

可以防止圆圈出现在另一个旁边吗？

是的，它足以改变如何生成随机数。改变这一行：

if(arr.indexOf(randomnumber) > -1) continue;

为：

if(arr.indexOf(randomnumber) > -1 || arr.indexOf(randomnumber + 1) > -1
                    || arr.indexOf(randomnumber - 1) > -1) continue;

另外，如果我想添加更多形状，我可以创建并附加另一个形状，然后在foreach中克隆它吗？

是。我添加了一个椭圆形的数字。

我的建议是：

生成20个随机不同的数字
克隆并移动调整大小的圆圈
隐藏所有生成的圈子：

＆＃13;

var field = document.getElementById("field");

for (var i = 0; i < 50; i++) {
    var square = document.createElement("div");
    square.className = 'square';
    field.appendChild(square);
}

for (var i = 0; i < 50; i++) {
    var circle = document.createElement("div");
    circle.className = (Math.random() >= 0.5) ? 'circle' : 'oval';
    field.appendChild(circle);
}


var arr = [];
while (arr.length < 20) {
    var randomnumber = Math.ceil(Math.random() * 50) - 1;
    if (arr.indexOf(randomnumber) > -1 || arr.indexOf(randomnumber + 1) > -1
            || arr.indexOf(randomnumber - 1) > -1) continue;
    arr[arr.length] = randomnumber;
}

arr.forEach(function (rnd, idx) {
    $('#field > .circle, #field > .removed, #field > .oval, #field > .ovalremoved').eq(rnd)
            .css({border: '1px solid #0000cc'}).clone()
            .css({width: '100%', height: '100%'})
            .appendTo($('.square').eq(rnd));
})

＆＃13;

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;
}

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.oval {
    font-size: 1rem;
    vertical-align: top;
    display: inline-block;
    width: 10%;
    height: 10%;
    box-sizing: border-box;
    border: 1px solid #f00;
    border-radius: 100px / 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="field"></div>

＆＃13;

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

2 个答案: