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

【问题标题】：Set a div at random position on a grid在网格上的随机位置设置一个 div
【发布时间】：2011-08-07 02:31:10
【问题描述】：

我正在尝试制作一个占浏览器窗口宽度 100% 的网格，首先我不确定如何处理该网格，其次我希望 div 在该网格中具有随机位置, 但只有在没有被占用的情况下才会填补这个位置。

我想我的问题是，我将如何去做，如果可能的话。

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

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

虽然我正在寻找每个正方形为 15 像素 x 15 像素，并且“边框”只有 1 像素

感谢您的帮助。

编辑：所有答案都很好，而且都可以接受我选择了我拥有的那个，因为它是最适合我想做的事情和我使用的那个，我不是说其他人没有工作，因为他们工作得一样好。我最初的要求是流体网格，但后来发生了变化，这使得我选择的答案更容易集成到我的项目中。 感谢大家的帮助！

【问题讨论】：

我看了一分钟的附图，开始看到圆圈。你的问题是恶作剧吗？！
还有人看到假白点吗？ :P
哈哈，是的，我也看到了它们，但不……不是恶作剧，只是一种简单的视错觉。这个问题是真实的。
YEAAAAAAAAAAAAAARRRRRRRRGHHHHHHHHHHHHHH！！！！
现在认真。你在使用像 jQuery 或 MooTools 这样的框架吗？我正在考虑动态生成 div，向服务器询问图像或其他内容，并将它们随机分配到不同的网格位置。

标签： php javascript jquery html css

【解决方案1】：

您可以使用 CSS 设置<div> 的位置：

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

应该可以。然后，通过它们的左/上（将它们存储在某处）知道每个 div 的坐标以及它们有多大，您可以在放置一个新的时通过一些简单的数学检查“碰撞”。

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

如果 LeftNew >= LeftExisting AND LeftNew
如果 TopNew >= TopExisting AND TopNew

【讨论】：

在固定网格上运行良好，并且能够轻松存储位置。

【解决方案2】：

让您开始：

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

返回如下内容：

【讨论】：

【解决方案3】：

你可以使用这个 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");
  }
}

之后，您可以对 PHP 脚本进行 AJAX 调用（传递每行的方块数），该脚本执行以下操作：

填充已占用的方格（如有必要）
生成一个随机网格位置，检查它是否被占用，然后将其显示在适当的网格中。

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

编辑

忘记添加了

CSS：

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

JSFiddle：

http://jsfiddle.net/9KaKj/

【讨论】：

这听起来不错，但是您知道保存单个 div 位置的任何解决方案吗？使用此方法是否支持跨浏览器？
需求本身似乎有缺陷。如果正方形宽度是固定的，则网格大小将始终根据浏览器/屏幕分辨率而变化。在我提出更好的解决方案之前，我必须更多地了解这将用于什么。一种选择是简单地将每个方格从开始到结束编号为 1,2,3,4...N，而不是 X 行 Y 列。
对正方形进行编号就可以了，我不担心行/列。我也猜想正方形的大小不固定也没关系。

【解决方案4】：

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

制作一个具有所需高度和宽度的容器 div；根据您的解释，我认为两者都是 100%，覆盖整个屏幕。
提示服务器询问您希望在 div 中以 json 格式显示的内容列表（在您的 php 中使用 json_encode()。）
获取容器 div 的区域（以像素为单位），只需将其长度和高度除以您要显示的项目数量即可将其分解为正方形，并且不要忘记考虑 1px 边框。这是每个较小网格的大小。
在您的 JavaScript 中，创建一个名为网格的数组。 0 填充到所需的网格数量。
循环遍历您想要的项目数量。在 do-while 循环中，模拟一个随机数，并检查这样的网格成员是否已经存在。如果没有，请退出循环，然后...
- 创建一个新的 div（使用网格类），使其内容成为先前获取的 json 对象的成员（因为您将获得一个项目数组，随机数生成将确保没有两次获取任何内容。 ) 将此 div 附加到容器 div 中。样式很明显，我们在第三步中介绍了它。

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

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

请注意，我没有时间把它做成方形（或者漂亮），但希望你能明白我的意思。

【讨论】：

这似乎是一个很好的方法，我很想看到一个例子，但它看起来很简单。如果您想出任何要添加的内容，请告诉我。谢谢。
如何创建一个空白空间？如|方|方|空白 |正方形