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

Question

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

这是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做到这一点？如果可能的话,我想避免使用库.

这与此处提出的问题类似,但我需要整个结构能够拥有未确定的行数,因此我指定哪些项位于哪些行对我的应用程序不可行的解决方案.

Answer 1

这是一个使用 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>