integrating jquery masonry into a zurb foundation grid

问题

I'm having issues integrating masonry with a Foundation grid layout. Essentially with identical width images with varying height, the masonry works as expected but at certain breakpoints the grid only will have a two column layout as opposed to the usual four.

However if you keep minimizing the browser width, the four columns return so it can't be that there isn't the room to display them.

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

回答1:

To answer your question about why your issue is happening: Unfortunately since integrating masonry and frameworks can be tricky since both are attempting to control the image in completely different ways (Foundation wants to resize and masonry wants to reposition). The best way to tackle this issue is to use a foundation container as the masonry container, the images inside will not resize, but will reposition within the fluid container while centering the container to avoid awkward margin issues which appear on the right-side of containers when images cannot be placed into an extra column.

=== UPDATE ===

I updated the code base with the most up-to-date Foundation version at the time of this update (5.0.2) in this github repository if you'd like to use it.

来源：https://stackoverflow.com/questions/15338954/integrating-jquery-masonry-into-a-zurb-foundation-grid

标签

jquery-masonry

zurb-foundation