javascript - 如何创建蜂窝 div 网格而不是标准网格？

Question

这是一个粗略的正常网格结构：http: //jsfiddle.net/CFxzH/1/

我正在尝试创建我所谓的蜂窝网格而不是标准的 div 网格。这是一个粗略的说明。

普通网格

[] [] [] [] []
[] [] [] [] []
[] [] [] [] []
[] [] [] [] []
[] [] [] [] []

蜂窝网格

[] [] [] [] []
  [] [] [] []
[] [] [] [] []
  [] [] [] []
[] [] [] [] []

我还想要实现的是父框的动态 100% 宽度，随着窗口的宽度而扩展。

Answer 1

您可以将 x 轴设置为 y 轴一半的值，然后将直径添加到存储桶。这也适用于六边形。这是一个关于快速网格搜索的问题：Optimizing search through large list of lat/long coords to find match。

Answer 2

在这里回收@bfavretto 的答案。

http://jsfiddle.net/CFxzH/2/

这样的事情就完成了。

var boxes_per_even_line = Math.floor($('#boxes').width() / 110);
var boxes_per_odd_line = boxes_per_even_line-1;
var boxes_every_two_lines = boxes_per_even_line + boxes_per_odd_line;
console.log(boxes_per_even_line, boxes_per_odd_line, boxes_every_two_lines)
var boxes = $('.box');
var total = boxes.length;

for(var i=boxes_per_even_line; i<total; i+=boxes_every_two_lines) {
    $(boxes[i]).css('margin-left', 65);
    $(boxes[i+boxes_per_odd_line-1]).css('margin-right', 65);
}