Wcięcie nawet rzędów sześciokątów w CSS

Question

Mam obecnie listę sześciokątów (obrazów), które zawijam do następnej linii, gdy szerokość przeglądarki maleje. Jednakże, gdy tak się dzieje, tworzą one równe linie widoczne na pierwszym obrazie, z których każdy rozpoczyna się w tym samym punkcie na osi X.

Here is the JS Fiddle (aczkolwiek, że heksy nie płynąć w prawo, ponieważ nie są zdjęcia). Prawdziwy kod to:

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

I CSS jest:

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

Co chciałbym zrobić, to alternatywny wiersze tak, że co drugi wiersz zaczyna się o przesunięcie wielkości sześciokątnym jako widać na rysunku drugim. Należy również zauważyć, że ten przykład ma również ujemną pozycję y względem odpowiedniej pozycji określonej na podstawie pierwszego obrazu.

Czy można to zrobić za pomocą samego CSS? Chciałbym unikać korzystania z biblioteki, jeśli w ogóle jest to możliwe.

Jest to podobne do pytania zadanego here, ale potrzebuję całej struktury, aby móc mieć nieokreśloną liczbę wierszy, więc rozwiązanie, w którym określam, które elementy są w których wierszach nie jest wykonalne dla mojej aplikacji.

Answer 1

Oto rozwiązanie, które wykorzystuje JavaScript, aby dodać niezbędnych przekształceń na czynniki atmosferyczne.

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> 

Answer 2

Rozwiązanie w JS Fiddle Demo:

Demo 1:

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

HTML kod:

<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 Co de:

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

Demo 2:

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