標準グリッドではなくハニカムdivグリッドを作成するにはどうすればよいですか？ここ

Question

はラフ通常のグリッド構造です：http://jsfiddle.net/CFxzH/1/

私はハニカムグリッドではなく、標準のdivグリッドと呼ぶものを作成しようとしています。ここに大まかなイラストがあります。私も達成したい何

NORMAL GRID

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

ハニカムGRID

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

は、ウィンドウの幅を拡大し、親ボックスの動的な100％の幅です。

Answer 1

リサイクル@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); 
} 

Answer 2

x軸をy軸の半分の値に設定してから、バケットに直径を追加することができます。これは六角形でも機能します。ここで、高速グリッド検索に関する質問があります：Optimizing search through large list of lat/long coords to find match。