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

Most efficient way to create a grid-look for my page

本文关键字：有效 方法 外观 网格 我的 创建      更新时间：2023-09-26

我想在我的页面上创建一个由非常非常小的盒子组成的网格-(例如，2像素的高度和宽度，或2x2)。我有过一些关于如何做到这一点的想法-所有这些都以这样或那样的方式失败了:

    PHP使用echo语句
  1. Javascript -目前为止我最好的选择
  2. 手动构建网格以适应800 x 800的空间(将花费太长时间)。

不幸的是，即使是我最好的选择也相当慢。有没有人有一个更好的计划，让我如何以一种有效的方式创建一个由小正方形组成的网格?

这适用于我(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 &

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

所以，你应该在你的图像程序中创建一个2x2(或3x3, 1像素边框)的图像，并创建一个div，你想要"网格化"，并给div一个background 
.gridify {
    background: url(image/grid.jpg) repeat left top;
}

其中grigrify是div/span/其他类。

进一步编辑

现在，既然你想点击拖动来选择一个区域，你能做的就是尝试在.gridifydiv的顶部创建一个div，并给新的"点击拖动"div一个更暗和透明的背景…这会给人一种框被选中的错觉。

下面是一些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>

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

相关文章：