使用CSS绘制网格 [英] Drawing a grid using CSS

问题描述

我正在寻找一种绘制网格的方法（即 http：/ / div内的/www.artlex.com/ArtLex/g/images/grid.gif ），使用CSS（必要时使用JS）。感觉应该比较直接，但我无法弄清楚。

I'm looking for a way to draw a grid (i.e. http://www.artlex.com/ArtLex/g/images/grid.gif) inside of a div, using CSS (and JS if necessary). It feels like it should be relatively straight forward, but I haven't been able to figure it out. Any advice would be greatly appreciated.

在此先感谢您，
Lenny

Thank you in advance, Lenny

推荐答案

这是使用jQuery的简单解决方案。该脚本将尝试填充尽可能多的网格元素而不会溢出。该函数接受单个参数，该参数定义了网格的大小。

Here's a simple solution using jQuery. This script will try to fill in as many grid element as possible without overflowing. The function accepts a single parameter, which defines the size of the grid.

function createGrid(size) {
    var ratioW = Math.floor($(window).width()/size),
        ratioH = Math.floor($(window).height()/size);

    var parent = $('<div />', {
        class: 'grid',
        width: ratioW  * size,
        height: ratioH  * size
    }).addClass('grid').appendTo('body');

    for (var i = 0; i < ratioH; i++) {
        for(var p = 0; p < ratioW; p++){
            $('<div />', {
                width: size - 1,
                height: size - 1
            }).appendTo(parent);
        }
    }
}

这也需要一个简单的CSS样式：

It also requires a simple CSS style:

.grid {
    border: 1px solid #ccc;
    border-width: 1px 0 0 1px;
}

.grid div {
    border: 1px solid #ccc;
    border-width: 0 1px 1px 0;
    float: left;
}

在此处查看简单演示： http://jsfiddle.net/yijiang/nsYyc/1/

See a simple demo here: http://jsfiddle.net/yijiang/nsYyc/1/

这里使用本地DOM函数。我还应该更改初始比率计算以使用DOM函数，但我无法终生得到 window.innerWidth 返回准确的数字 ：

Here's one using native DOM functions. I should also change the initial ratio calculation to use DOM functions but I cannot for the life of me get window.innerWidth to return accurate numbers fixed that:

function createGrid(size) {
    var ratioW = Math.floor((window.innerWidth || document.documentElement.offsetWidth) / size),
        ratioH = Math.floor((window.innerHeight || document.documentElement.offsetHeight) / size);

    var parent = document.createElement('div');
    parent.className = 'grid';
    parent.style.width = (ratioW * size) + 'px';
    parent.style.height = (ratioH * size) + 'px';

    for (var i = 0; i < ratioH; i++) {
        for (var p = 0; p < ratioW; p++) {
            var cell = document.createElement('div');
            cell.style.height = (size - 1) + 'px';
            cell.style.width = (size - 1) + 'px';
            parent.appendChild(cell);
        }
    }

    document.body.appendChild(parent);
}

createGrid(10);

这基本上是jQuery代码的直接翻译。如果您需要更高的性能，则可以使用推入数组的字符串来切换生成框：

It's basically a direct translation of the jQuery code. If you need even more performance you can switch to generating the boxes using strings pushed to an array:

arr.push('<div style="width:', (size - 1), 'px;height:', (size - 1), 'px;"></div>');

然后在最后

parent.innerHTML = arr.join('');

这篇关于使用CSS绘制网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！