使用CSS绘制网格
使用CSS绘制网格
提问于 2010-11-16 12:34:28
我正在寻找一种在div中绘制网格(即http://www.artlex.com/ArtLex/g/images/grid.gif)的方法，使用CSS (如果需要，还可以使用JS )。感觉它应该是相对简单的，但我还没能弄清楚。任何建议都将不胜感激。
提前谢谢你，莱尼
回答 6
Stack Overflow用户
发布于 2015-02-05 20:34:55
下面是一个简单的CSS解决方案，使用线性渐变：
html,
body,
.grid {
height: 100%;
width: 100%;
margin: 0;
}
.grid {
background-image:
repeating-linear-gradient(#ccc 0 1px, transparent 1px 100%),
repeating-linear-gradient(90deg, #ccc 0 1px, transparent 1px 100%);
background-size: 71px 71px;
}<div class="grid"></div>
Stack Overflow用户
发布于 2011-04-01 23:11:31
我知道这个问题已经得到了回答，但我已经为我正在做的一个项目做了大量关于这个问题的工作，所以我想我应该分享我的发现。渲染速度对我来说是一个巨大的问题，就像@ to酱一样，我从循环内部添加节点开始，但我发现这不是一个性能很好的解决方案，所以我寻找了优化算法的方法。
从算法上讲，嵌套循环导致O(n^2)复杂度，在这种情况下，可以通过生成一次行html (因为每行都是相同的)，然后将该字符串连接到每一行来避免这种情况。这将导致O(n)复杂度，并且是迄今为止我发现的最有效的解决方案。
function drawGrid(width, height) {
var grid = '<div id="grid">',
cell_html = '',
i = 0, j = 0;
for( ; i < width; i++) {
cell_html += '<div class="cell"></div>';
}
for( ; j < height; j++) {
grid += '<div class="row">' + cell_html + '</div>';
}
grid += '</div>';
return grid;
}这将为网格创建基本的HTML结构，然后可以使用CSS适当地设置该结构的样式。
Stack Overflow用户
发布于 2014-04-18 00:35:11
这里有一个解决方案，它是@ it酱的答案的编辑版本，以将其复杂性降低到O(n)。我添加我的解决方案的唯一原因是它包含css和jsfiddle示例(http://jsfiddle.net/madstop/bM5Kr/)。
css：
.gridlines { display: none; position:absolute; background-color:#ccc; }javascript/jquery：
function createGrid(size) {
var i,
height = $(window).height(),
width = $(window).width(),
ratioW = Math.floor(width/size),
ratioH = Math.floor(height/size);
for (i=0; i<= ratioW; i++) // vertical grid lines
$('<div />').css({
'top': 1,
'left': i * size,
'width': 1,
'height': height })
.addClass('gridlines')
.appendTo('body');
for (i=0; i<= ratioH; i++) // horizontal grid lines
$('<div />').css({
'top': 1 + i * size,
'left': 0,
'width': width,
'height': 1 })
.addClass('gridlines')
.appendTo('body');
$('.gridlines').show();
}
createGrid(50);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4191260
复制相关文章
相似问题