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

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>