使用 CSS 绘制网格

2022-01-18 00:00:00 grid layout drawing javascript css

我正在寻找一种绘制网格的方法(即 http:///www.artlex.com/ArtLex/g/images/grid.gif) 在 div 内，使用 CSS(必要时使用 JS).感觉它应该相对简单，但我一直无法弄清楚.任何建议将不胜感激.

提前谢谢你，莱尼

解决方案

这里有一个使用 jQuery 的简单解决方案.该脚本将尝试在不溢出的情况下填充尽可能多的网格元素.该函数接受一个参数，该参数定义了网格的大小.

function createGrid(size) {var ratioW = Math.floor($(window).width()/size),ratioH = Math.floor($(window).height()/size);var parent = $('<div/>', {类:'网格'，宽度:比率W * 大小，高度:比率H * 大小}).addClass('grid').appendTo('body');for (var i = 0; i < ratioH; i++) {for(var p = 0; p ', {宽度:尺寸 - 1，高度:尺寸 - 1}).appendTo(父);}}}

它还需要一个简单的 CSS 样式:

.grid {边框:1px 实心#ccc；边框宽度:1px 0 0 1px；}.grid div {边框:1px 实心#ccc；边框宽度:0 1px 1px 0；向左飘浮;}

在这里查看一个简单的演示:http://jsfiddle.net/yijiang/nsYyc/1/

<小时>

这是一个使用原生 DOM 函数的例子.我还应该更改初始比率计算以使用 DOM 函数，但我无法终生获得 window.innerWidth 以返回准确的数字 修复:

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 = '网格';parent.style.width = (ratioW * size) + 'px';parent.style.height = (ratioH * size) + 'px';for (var i = 0; i < ratioH; i++) {for (var p = 0; p

它基本上是 jQuery 代码的直接翻译.如果您需要更高的性能，您可以切换到使用推送到数组的字符串来生成框:

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

然后在最后

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

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.

Thank you in advance, Lenny

解决方案

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);
        }
    }
}

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;
}

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

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);

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>');

then at the end

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

相关文章