创建网格页面的最有效方法

Question

创建网格页面的最有效方法

phpjavascripthtml

4

我希望在我的页面上创建一个由微小的方块组成的网格 - （比如说，2像素高宽或2x2）。我有几个想法可以实现这一目标，但是都以某种方式失败了：

使用PHP的echo语句
Javascript-迄今为止我最好的选择
手动构建网格以适应800 x 800空间（需要太长时间）。

不幸的是，即使是我最好的选择也很慢。有没有更好的计划来以有效的方式创建由微小正方形组成的网格？

- user725913

1

这个网格是用来做什么的？知道这个网格的用途会很有帮助。 - cdeszaq

1

如果只是为了美观，我强烈建议使用Photoshop或类似的图像处理程序。 - Oranges13

1

我不想自夸，但也许你想看看我为我的生命游戏实现创建的网格。它使用画布来绘制网格。 - Felix Kling

现在正在检查，看起来不错。 - user725913

看看百万像素主页，他们用<area>和coords创建了一个巨大的网格 http://milliondollarhomepage.com/ - Dan

显示剩余2条评论

4个回答

1

这对我有效（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>

仅在Ubuntu Lucid上测试了FF和Chrome（两者都测试过），但是这个想法应该可以工作。

- Eugen Rieck

首先，我想感谢您编写的漂亮代码。不幸的是，我希望用户能够选择网格、拖动等等。因此，上面发布的游戏似乎是我最好的选择（一旦我让它正常运行——因为它正在抛出一个烦人的JQuery错误）。 - user725913

0

你可以看一下瀑布流jQuery插件。不幸的是，它的目标是重新排列和动画化网格布局，而不是打印微小的2D布局，但也许它会有所帮助。它还可以为每个砖块或单元定义一个函数。它的算法类似于装箱问题。

- Micromega

0

这是一个打印网格的 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>

- ben

做完了，但效率太低了，不太符合我的喜好。 - user725913

这里的问题是：任何在PHP循环中“过于低效”而无法创建的内容，对于任何浏览器来说都太多了。例如，对于您的800x800个2x2像素的网格，您将查看400x400 = 163,840,000个单独的HTML元素。这太多了，没有任何实际用途，因为如果您对它们中的每一个应用简单的mouseOver事件，任何浏览器都会崩溃。 - LAW

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

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

- Indranil · Accepted Answer

在一个2x2的网格中，我相信你不会显示任何数据。即使你这样做了，我认为它也不会在每个网格框内。

因此，您应该在图像程序中创建一个2x2（或3x3带有1像素边框的）图像，并创建一个要“网格化”的div，并给该div一个background。

.gridify {
    background: url(image/grid.jpg) repeat left top;
}

这里的 gridify 是你的 div/span/等等的类名。

进一步编辑

现在，由于你想要点击并拖动来选择一个区域，你可以尝试这个在 .gridify div 上创建一个新的 div，并给新的“点击和拖动”div 一个更暗、透明的背景... 这将给人们一种被选中的方框的错觉。