Question

我想在我的页面上创建一个由微小的盒子组成的网格 - （例如，2像素高度和宽度，或2x2）。我对如何解决这个问题有一些想法 - 所有这些都以某种方式失败了：

PHP使用echo statemenet
Javascript - 到目前为止我最好的选择
手动构建网格以适应800 x 800空间（将花费太长时间）。

不幸的是，即便是我最好的选择也很慢。有没有人有更好的计划如何以有效的方式创建由小方块组成的网格？

Answer 1

在2x2网格上，我很确定你不会显示任何数据。即使你是，我认为它不会在每个网格框内。

因此，您应该在图像程序中创建一个2x2（或带有1像素边框的3x3）图像，并创建一个您想要“grid-ify”的div并给div {{1} }

background

如果gridify是你的div / span /你有什么类。

进一步修改

现在，由于您要单击并拖动以选择某个区域，您可以执行try this在.gridify { background: url(image/grid.jpg) repeat left top; } div之上创建div，然后将新的“clicked-and -dragged“div一个更暗更透明的背景......这将给出选择框的错觉。

Answer 2

这适用于我（grid.gif是带边框的3x3，有关工作版本，请参阅http://stuff.drnet.at/stackoverflow/grid/）：

<html><head>
<script language="JavaScript">
function mm (e) {
  if (!e) e=window.Event;
  var o=document.getElementById('grid');
  var x=e.clientX-o.offsetLeft;
  var y=e.clientY-o.offsetTop;
  document.getElementById('coords').innerHTML=''+x+'/'+y;
}
</script>

</head>
<body onload="document.getElementById('grid').onmousemove=mm;">
<div id="grid" style="position:absolute; left:10px; top:10px; width:800px; height:600px; background: url(grid.gif) repeat left top; border:1px solid black; padding:0px; margin:0px;"></div>
<div id="coords" style="position:absolute; left:10px; top:620px;"></div>
</body>
</html>

使用FF＆amp ;;进行测试Chrome（仅限Ubuntu Lucid），但想法应该有用。

Answer 3

这是一个用于打印网格的小PHP：

<?php
$size = 5;
$total = 100;
?>
<html>
<head>
        <style>
        .box {
                width:<?php echo $size; ?>px;
                height:<?php echo $size; ?>px;
                float:left;
        }
        .black {
                background-color:black;
        }
        .white {
                background-color:white;
        }
        </style>
</head>
<body>

<?php
echo "<div style='width:{$total}px;height:{$total}px;'>\n";
$start_color = true;
for($i = 1; $i <= floor($total/$size); $i++) {
        $start_color =! $start_color;
        $current_color = $start_color;
        for($j = 1; $j <= floor($total/$size); $j++) {
                echo "<span class='box ".(($current_color) ? 'black' : 'white')."' id='box_{$i}_{$j}'></span>\n";
                $current_color =! $current_color;
        }
}
echo "</div>";
?>
</body>
</html>

Answer 4

你可以看看砌体jQuery插件。 Unfortunatley它的目标是重新排列和动画网格布局，而不是打印一个小的2D布局，但也许它有帮助。它还可以为每个砖块或单元格定义一个函数。它的算法类似于bin-packing。

最有效的方式为我的页面创建网格外观

4 个答案: