integrazione della muratura jquery in una griglia di fondazione di zurb

Question

Si verificano problemi durante l'integrazione della muratura con un layout di griglia di Foundation. Essenzialmente con immagini di larghezza identiche con altezza variabile, la muratura funziona come previsto ma in alcuni punti di interruzione la griglia avrà solo un layout a due colonne rispetto ai soliti quattro.

Tuttavia, se si continua a ridurre la larghezza del browser, le quattro colonne vengono restituite in modo che non sia possibile che non ci sia spazio per visualizzarle.

var $container = $('#work_grid'); 

$container.imagesLoaded(function(){ 
$('#work_grid').masonry({ 
    itemSelector: '.work_item', 
    isAnimated: true,  
}); 

HTML

<div class="row"> 
    <div class="twelve columns"> 
     <div id="work_grid" class="block-grid four-up"> 
      <li class="work_item"><img src="stylesheets/images/work1.jpg" alt=""></li> 
      <li class="work_item"><img src="stylesheets/images/work2.jpg" alt=""></li> 
      <li class="work_item"><img src="stylesheets/images/work3.jpg" alt=""></li> 
      <li class="work_item"><img src="stylesheets/images/work4.jpg" alt=""></li> 
      <li class="work_item"><img src="stylesheets/images/work5.jpg" alt=""></li> 
      <li class="work_item"><img src="stylesheets/images/work6.jpg" alt=""></li> 
      <li class="work_item"><img src="stylesheets/images/work7.jpg" alt=""></li> 
     </div> <!-- /.block-grid four-up --> 
    </div> <!-- /.twelve columns --> 
</div> <!-- /.row --> 

Answer 1

per rispondere alla tua domanda sul motivo per cui il problema sta accadendo: Purtroppo dal integrando masonr e le strutture possono essere complicate dal momento che entrambi stanno tentando di controllare l'immagine in modi completamente diversi (la Fondazione vuole ridimensionare e la muratura vuole riposizionarla). Il modo migliore per affrontare questo problema è utilizzare un contenitore di fondazione come contenitore in muratura, le immagini all'interno non verranno ridimensionate, ma si riposizioneranno all'interno del contenitore del fluido mentre centrando il contenitore per evitare problemi di margine scomodi che appaiono sul lato destro di contenitori quando le immagini non possono essere inserite in una colonna aggiuntiva.

=== UPDATE ===

ho aggiornato il codice di base con la versione Fondazione più up-to-date al momento di questo aggiornamento (5.0.2) in this github repository se vuoi per usarlo.