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

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个随机不同的数字
• 克隆和移动圆圈调整大小
• 隐藏所有生成的圈子：

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)); 
 
})

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; 
 
}

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

 

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