Rientro di righe uguali di esagoni nei CSS

Question

Attualmente ho un elenco di esagoni (immagini) che ho inserito nella riga successiva quando la larghezza del browser diminuisce. Tuttavia, quando ciò accade, formano linee pari come nella prima immagine, ciascuna che inizia nello stesso punto sull'asse x.

Here is the JS Fiddle (sia pure, gli esagoni non scorrono proprio perché non sono immagini). Il codice vero e proprio per questo è:

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

E il 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; 
} 

Quello che vorrei fare è alternare le righe in modo tale che ogni riga inizia un offset della dimensione esagonale come visto in figura due. Si dovrebbe anche notare che questo esempio ha anche una posizione y negativa rispetto alla rispettiva posizione come determinata dalla prima immagine.

C'è un modo per farlo con solo CSS? Mi piacerebbe evitare l'uso di una biblioteca, se possibile.

Questo è simile alla domanda here, ma ho bisogno che l'intera struttura sia in grado di avere un numero indeterminato di righe, quindi la soluzione in cui specifichi quali elementi sono in quali righe non è fattibile per la mia applicazione.

Answer 1

Ecco una soluzione che utilizza Javascript per aggiungere le trasformazioni necessarie agli elementi.

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

Soluzione in JS Fiddle Demo:

Demo 1:

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

codice 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 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/