如何創建蜂巢格網格而不是標準網格？

Question

這裏是一個粗糙的正常網格結構：http://jsfiddle.net/CFxzH/1/

我想創建我所說的蜂窩網格而不是標準的div網格。這是一個粗略的例子。

正常電網

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

蜂巢導

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

我也想實現的是父箱的動態寬度爲100％，與窗口的寬度擴大。

Answer 1

回收@ bfavretto的答案在這裏。

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

像這樣的事情GET的完成工作。

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

Answer 2

您可以將x軸設置爲y軸一半的值，然後將直徑添加到存儲桶。這也適用於六角形。以下是有關快速網格搜索的問題：Optimizing search through large list of lat/long coords to find match。