Integration of jquery masonry into zurb foundation mesh

Question

I'm having trouble integrating masonry with Foundation mesh layout. Essentially, with the same width images with different heights, the masonry works as expected, but at certain breakpoints, the grid will only have the location of two columns, unlike the usual four.

However, if you continue to minimize the width of the browser, the four columns are returned, so there can be no place 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 --> 

Answer 1

To answer the question of why your problem occurs: Unfortunately, since the integration of masonry and frameworks can be difficult, because both try to control the image in completely different ways (the Fund wants to resize, and the masonry wants to redo). The best way to solve this problem is to use the foundation container as a container for masonry, the images inside will not change, but will move inside the liquid container, and center the container to avoid uncomfortable margin problems that appear on the right side of the containers when the images cannot be placed in an extra column.

=== UPDATE ===

I updated the code base with the most modern version of Foundation during this update (5.0.2) in this github repository , d would like to use it.