Question

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

我想我的问题是，我怎么会这样做，如果可能的话。

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

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

虽然我正在寻找每个方格15px乘15px而'边框'只有1px

感谢您的帮助。

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

Answer 1

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

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

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

例如，要检查单个div New是否与Existing碰撞，您可以检查New的任何一个角是否在Existing的范围内广场，例如：

如果LeftNew＆gt; = LeftExisting AND LeftNew＆lt; =（LeftExisting + WidthExisting）则碰撞
如果TopNew＆gt; = TopExisting AND TopNew＆lt; =（TopExisting + HeightExisting）然后发生碰撞

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

返回如下内容：

Grid

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

Answer 4

这是我的总体想法（抱歉，但是时间太短，无法向您展示整件事）：

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

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

编辑：无法帮助自己并在jsfiddle中做了一个简短的例子：http://jsfiddle.net/tgwnV/

请注意，我没有时间把它变成方形（或者说很漂亮），但希望你能抓住我的漂移。

在网格上的随机位置设置div

4 个答案: