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

【问题标题】：How do I create a honeycomb div grid rather than the standard grid?如何创建蜂窝 div 网格而不是标准网格？
【发布时间】：2012-04-10 00:18:50
【问题描述】：

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

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

普通网格

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

蜂窝网格

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

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

【问题讨论】：

当你交替使用偶数元素和每行奇数元素时，你应该得到一个蜂窝。当然它不会总是填满最后一行。
这很接近...jsfiddle.net/CFxzH/2
也许这会对你有所帮助：stackoverflow.com/questions/70294413/…

标签： javascript jquery

【解决方案1】：

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

【讨论】：

【解决方案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);
}

【讨论】：