Question

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

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

NORMAL GRID

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

HONEYCOMB GRID

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

我还想实现的是父盒子的动态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);
}

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

2 个答案: