integracja muru jquery z siatką fundacji zurb

Question

Mam problemy z integracją muru z układem siatki Foundation. Zasadniczo w przypadku obrazów o takiej samej szerokości i różnej wysokości, murowanie działa zgodnie z oczekiwaniami, ale w pewnych punktach przerwania siatka będzie miała tylko układ dwóch kolumn, w przeciwieństwie do zwykłych czterech.

Jeśli jednak ograniczysz do minimum szerokość przeglądarki, cztery kolumny zostaną zwrócone, więc nie może być mowy o tym, że nie ma miejsca na ich wyświetlanie.

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

Aby odpowiedzieć na pytanie o dlaczego Twój problem się dzieje: Niestety od integracji masonr y i ramy mogą być trudne, ponieważ obydwoje próbują kontrolować obraz w zupełnie inny sposób (Fundacja chce zmienić rozmiar, a murarstwo chce zmienić położenie). Najlepszym sposobem rozwiązania tego problemu jest użycie kontenera fundamentowego jako pojemnika na ścianę, obrazy wewnątrz nie zmienią rozmiaru, ale zmienią położenie w pojemniku na płyn, podczas gdy wyśrodkują pojemnik, aby uniknąć niezręcznych problemów z marginesem, które pojawiają się po prawej stronie pojemników, gdy zdjęć nie można umieścić w dodatkowej kolumnie.

=== UPDATE ===

zaktualizowałem bazę kodu z wersji Foundation najbardziej up-to-date w czasie tej aktualizacji (5.0.2) w this github repository jeśli chcesz używać tego.