在CSS中缩进偶数行的六边形

Question

我目前有一个六边形（图像）列表，当浏览器宽度减小时，我已将其包装到下一行。但是，当发生这种情况时，它们会形成第一张图像中看到的偶数线，每条线都从x轴上的同一点开始。

Here is the JS Fiddle（虽然，咒语不能正确流动，因为它们不是图像）。真正的代码是：

<div class="container">
    <span>
        <img class="hex" src="img/hex.png">
    </span>
    ...
</div>

CSS是：

.container {
    padding-top: 80px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.container span {
    line-height: 129px;
    display: inline-block;
}

.container .hex {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

我想要做的是交替行，使得每隔一行从六边形大小的偏移处开始，如图2所示。还应注意，该示例相对于从第一图像确定的相应位置也具有负y位置。

有没有办法用CSS做到这一点？如果可能的话，我想避免使用库。

这与问题here类似，但我需要整个结构能够拥有不确定数量的行，因此我指定哪些项在哪些行中不可行的解决方案我的申请。

Answer 1

JS小提琴演示中的解决方案：

演示1：

http://jsfiddle.net/mkginfo/bhxohocv/

HTML代码：

<div class="container">
     <!-- odd line -->
    <span>
        <div class="hexagon"> </div>
    </span>
    <span>
        <div class="hexagon"> </div>
    </span>
    <span>
        <div class="hexagon"> </div>
    </span>
    <!-- even line -->
     <span class="odd">
        <div class="hexagon"> </div>
    </span>
     <span>
        <div class="hexagon"> </div>
    </span>
    <!-- odd line -->
    <span>
        <div class="hexagon"> </div>
    </span>
    <span>
        <div class="hexagon"> </div>
    </span>
    <span>
        <div class="hexagon"> </div>
    </span>
</div>

CSS代码：

.container {
    padding-top: 80px;
    width: 65%;
    margin-left: auto;
    margin-right: auto;
}

.container span {
    line-height: 129px;
    display: inline-block;
    position: relative;
    margin-bottom: 25px;
}
.container span.odd {
    line-height: 129px;
    display: inline-block;
    position: relative;
    margin-bottom: 25px;
    margin-left: 52px;
    margin-top: -20px;
}

.container .hex {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.hexagon {
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
}

.hexagon:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}

.hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}

演示2：

http://jsfiddle.net/mkginfo/wnsjfwt0/

Answer 2

这是一个使用javascript向元素添加必要转换的解决方案。

CSS：

.container {
    padding-top: 80px;
    width: 65%;
    margin-left: auto;
    margin-right: auto;
}

.floatBox {
    margin-left: 15px;
    margin-right: 15px;
}

.floatBox div {
    display: inline-block;

}
.floatBox div.odd {
    margin-left: 67px;
}

JS：

var floatBox = $(".floatBox");
var elements = floatBox.children();
var numElements = elements.length;

//reset all styles so they don't compound
elements.removeClass("odd");
elements.css("transform", "translateY(0)");
elements.css("-ms-transform", "translateY(0)");
elements.css("-webkit-transform", "translateY(0)");

var width = $(window).width() *.65;
var evenRowWidth = Math.floor(width / 135);
var oddRowWidth = Math.max(evenRowWidth - 1, 1);
var numberOfRows = 0;

var floatBoxWidth = evenRowWidth *138;
var delta = Math.floor((width-floatBoxWidth)/2);
floatBox.css("margin-left", delta);
floatBox.css("margin-right", delta);

var test = numElements;
var j = 2;
while (test > 0)
{
    if (j % 2 == 0)
    {
        test -= evenRowWidth;
    }
    else
    {
        test -= oddRowWidth;
    }
    numberOfRows++;
    j++;
}

j = 0;
var actionRow = 2;
var rowCount = 1;
var first = true;
for (var i = evenRowWidth; i < numElements; i++)
{
    var translationAmt = -37*(actionRow-1);
    if (actionRow % 2 == 0 && first)
    {
        first = true;
    }
    if (first)
    {
        $(elements.get(i)).addClass("odd");
        first = false;
    }
    $(elements.get(i)).css("transform", "translateY(" + translationAmt + "px)");
    $(elements.get(i)).css("-ms-transform", "translateY(" + translationAmt + "px)");
    $(elements.get(i)).css("-webkit-transform", "translateY(" + translationAmt + "px)");

    if (actionRow % 2 == 0)
    {
        if (rowCount == oddRowWidth)
        {
            actionRow++;
            rowCount = 0;
        }
    }
    else
    {
        if (rowCount == evenRowWidth)
        {
            actionRow++;
            rowCount = 0;
            first = true;
        }
    }
    rowCount++;
}

HTML：

<div class="container">
    <div class="floatBox">

        <div>
            <span>
                <img src="image.png">
            </span>
        </div>
        ...
    </div>
</div>