如何在列內隨機創建網格和放置元素？

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

小提琴

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>