在网格上随机设定一个div的位置

Question

在网格上随机设定一个div的位置

phpjavascriptjqueryhtmlcss

4

我想创建一个网格，它占据浏览器窗口的100％宽度，首先我不确定如何制作这个网格，其次我希望一个div在该网格中具有随机位置，但仅在该位置未被占用时填充该位置。

我猜我的问题是，我该怎么做，是否可能实现？

我猜我需要一个数据库来记录所有位置？

PS：当我说网格时，我不是指960网格或任何框架网格，我只想要一个简单的正方形网格

尽管我希望每个正方形都是15px x 15px，'边框'只有1px

感谢您的帮助。

编辑：所有答案都很好，都可以接受。我选择了这个答案，因为它最适合我想要做的事情，并且是我使用的答案。我不是说其他答案不起作用，因为它们同样有效。我最初的要求是流体网格，但后来改变了，这使得我选择的答案更容易集成到我的项目中。

感谢大家的帮助！

- Elgoog

我看了一分钟附上的图片，开始看到圆圈。你的问题是恶作剧吗？！ - András Szepesházi

4

还有人看到假的白点吗？:P - Zirak

哈哈，是的，我也看到了，但这不是恶作剧，只是一个简单的视觉错觉。问题是真实存在的。 - Elgoog

没有可翻译的内容。请提供需要翻译的英文文本。 - Blender

现在认真点，你使用像jQuery或MooTools这样的框架吗？我在考虑动态生成div，向服务器请求图片或其他内容，并将它们随机分配到不同的网格位置。 - Zirak

我目前正在使用jQuery。 - Elgoog

4个回答

1

为了让你开始：

<html>
    <head>
        <title>Grid</title>
        <style>
            TABLE {
            border-collapse : collapse;
            border : 5px solid black;
            background-color : #ffff99;
            }
            TD {
            border : 5px solid black;
            width : 30px;
            height : 30px;
            background-color :white;
            }
            TD.selected {
            background-color : gray;
            }
        </style>
    </head>
    <body>
        <table class="alerts">

<?

$columns = 6;
$column = rand(0,$columns-1);
$rows = 10;
$row = rand(0,$rows-1);

for($y=0;$y<$rows;$y++) {
    echo '<tr>';
    for($x=0;$x<$columns;$x++) {
        if($x == $column && $y == $row) {
            echo '<td class="selected">&nbsp;</td>';
        } else {
            echo '<td>&nbsp;</td>';
        }
    }
    echo '</tr>';
}

?>
        </table>
    </body>
</html>

返回类似这样的内容：

Grid

- Anne

0

你可以使用这个JS来创建网格并为每个方块分配ID。

w = $(document).width();
t = w/15;
for(j=0;j<t;j++){
  for(i=0;i<t;i++){
    $('body').append("<div id='grid_"+j+"x"+ i+"'class='gridsquare'></div");
  }
}

接下来，您可以通过AJAX调用PHP脚本（传递每行方块数）执行以下操作：

填充占用的方块（如果需要）
生成随机网格位置，检查其是否被占用，然后在适当的网格中显示它。

问题在于，由于您正在处理各种浏览器宽度，因此您的15px方块将导致不同浏览器的不同大小的网格，因此您无法真正将位置记录到数据库中，因为每个网格大小都会导致不同的位置。

编辑

忘记添加

CSS：

.gridsquare {
  height: 15px; width: 15px; float: left; border: 1px solid black;
}

JSFiddle：

http://jsfiddle.net/9KaKj/

- Fareesh Vijayarangam

这听起来是个好方法，但您知道使用此方法保存单个div位置并具有跨浏览器支持的解决方案吗？ - Elgoog

需求本身似乎有缺陷。如果正方形的宽度固定，网格大小将根据浏览器/屏幕分辨率而改变。在我能提出更好的解决方案之前，我需要了解一些关于这将用于什么的信息。其中一个选项是简单地从开始到结束对每个正方形进行编号1,2,3,4...N，而不是行X，列Y。 - Fareesh Vijayarangam

编号正方形就可以了，我不太担心行/列。而且，我想正方形的大小也不是固定的。 - Elgoog

0

这是我的总体想法（抱歉，时间太短，无法向您展示全部内容）：

创建一个容器div，其高度和宽度应符合您的要求；从您的解释中我得知这两个属性都是100%，占据整个屏幕。
向服务器发送请求，以json格式返回您在div中要显示的内容列表（在php中使用json_encode()）。
获取容器div的像素面积，通过将其长度和高度除以要显示的项目数量并考虑1像素边框来分割成小方块。这就是每个较小网格的大小。
在JavaScript中，创建一个名为grids的数组，并将其填充为所需的网格数量。
循环遍历您想要显示的项目数量。在do-while循环内，模拟生成随机数，并检查是否已存在这样一个网格成员。如果不存在，退出循环，然后...
- 创建一个新div（其类名为grid），将其内容设置为先前获取的json对象的成员（由于您将获得一组项目的数组，因此随机数生成将确保不会重复获取）。将此div附加到容器div上。样式很明显，在第3步中已涵盖。

就是这样...不太复杂，并且没有闪烁的白点。

编辑：我忍不住在jsfiddle上做了一个简短的示例：http://jsfiddle.net/tgwnV/

请注意，我没有时间将其制作成正方形（或漂亮的形状），但希望你能明白我的意思。

- Zirak

这似乎是一个很好的方法，我很想看到一个例子，但它似乎足够简单明了。如果你有任何要补充的，请告诉我。谢谢。 - Elgoog

如何创建一个空格？例如 | 正方形 | 正方形 | 空格 | 正方形。 - Elgoog

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fanis Hatzidakis · Accepted Answer

你可以使用CSS设置<div>的位置:

#div1 { 
    position: absolute;
    left: 100px;
    top: 100px; 
    width: 15px;
    height: 15px; 
}

应该可以正常工作。然后，通过它们的左/顶部坐标（将其存储在某个地方）以及它们有多大，您可以使用一些简单的数学方法在放置新元素时检查“碰撞”。

例如，要检查单个div New 是否与 Existing 发生碰撞，可以检查 New 的任何一个角是否在 Existing 的正方形内，例如：

如果 LeftNew >= LeftExisting AND LeftNew <= (LeftExisting + WidthExisting)，则发生碰撞
如果 TopNew >= TopExisting AND TopNew <= (TopExisting + HeightExisting)，则发生碰撞