[英]How to create grid and place elements randomly inside column?
I have a responsive grid that is created with js and css. 我有一个用js和css创建的响应网格。 Inside each column in the grid I want to place elements (the red squares), but the squares should be placed randomly and only inside some of the columns.
我想在网格的每个列中放置元素(红色正方形),但是正方形应该随机放置,并且只能放置在某些列中。 There is 50 columns, so let's say I want to place 20 squares randomly inside columns so that the squares can't overlap.
一共有50列,所以假设我要在列内随机放置20个正方形,以使正方形不会重叠。 How do I achieve this in the best way?
如何以最佳方式实现这一目标?
js 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);
}
First add an ID to each square, then the idea is to generate a random number between 0 and 49 to be able to access those squares. 首先为每个正方形添加一个ID,然后产生一个介于0到49之间的随机数以访问这些正方形。 Each time you add a square, you have to store its index to check whether it has already been added.
每次添加正方形时,都必须存储其索引以检查是否已添加。 Only stop until 20 squares is added.
直到添加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 UPDATE 答案更新
is it possible to prevent a circle to appear next to another?
是否可以防止一个圆圈紧接另一个圆圈出现?
Yes, it's enough to change how to generate random numbers. 是的,足以更改生成随机数的方式。 Change this line:
更改此行:
if(arr.indexOf(randomnumber) > -1) continue;
to: 至:
if(arr.indexOf(randomnumber) > -1 || arr.indexOf(randomnumber + 1) > -1
|| arr.indexOf(randomnumber - 1) > -1) continue;
Also if I want to add more shapes, can I just create and append another shape and then clone that in the foreach?
另外,如果我想添加更多形状,是否可以仅创建并附加另一个形状,然后将其克隆到foreach中?
Yes. 是。 I added an oval figure.
我加了一个椭圆形的数字。
My proposal is: 我的建议是:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.