Menu icon Foundation
Equalizer and masonry problem

Hi guys,

I'm working on a site and using equalizer, but on my blog page I'm also using masonry, which works fine. Except that I end up having a lot of space at the bottom of the page. I'm assuming it's because the equalizer creates a height before masonry adjusts the layout.

I've tried using jQuery(document).foundation('reflow');, but it doesn't work. I've also tried jQuery(document).foundation( 'equalizer', 'reflow');, but not only doesn't that work, it kills the mobile off-canvas navigation (which won't open anymore). Any suggestions?

Oh, I'm using ImagesLoaded for masonry, so this is the script that is called at the bottom of the page (I'm using Foundation 5.5 in combination with Wordpress):

jQuery(document).ready(function($) {
    var container = document.querySelector('#masonry');
    var msnry;
    // initialize Masonry after all images have loaded
    imagesLoaded( container, function() {
        msnry = new Masonry( container, {
        itemSelector: '.item',
        stamp: '.stamp'
        });
    });

}); // End jQuery(document).ready(function($) 

/* Foundation Styles */
jQuery.noConflict();
jQuery(document).foundation('reflow');
            

         

EqualizermasonryReflow

Hi guys,

I'm working on a site and using equalizer, but on my blog page I'm also using masonry, which works fine. Except that I end up having a lot of space at the bottom of the page. I'm assuming it's because the equalizer creates a height before masonry adjusts the layout.

I've tried using jQuery(document).foundation('reflow');, but it doesn't work. I've also tried jQuery(document).foundation( 'equalizer', 'reflow');, but not only doesn't that work, it kills the mobile off-canvas navigation (which won't open anymore). Any suggestions?

Oh, I'm using ImagesLoaded for masonry, so this is the script that is called at the bottom of the page (I'm using Foundation 5.5 in combination with Wordpress):

jQuery(document).ready(function($) {
    var container = document.querySelector('#masonry');
    var msnry;
    // initialize Masonry after all images have loaded
    imagesLoaded( container, function() {
        msnry = new Masonry( container, {
        itemSelector: '.item',
        stamp: '.stamp'
        });
    });

}); // End jQuery(document).ready(function($) 

/* Foundation Styles */
jQuery.noConflict();
jQuery(document).foundation('reflow');
            

         
Rafi Benkual over 4 years ago

What is your reason for using masonry and equalizer? Isn't the point of Masonry to fit together elements of unequal height?

You can use equalizer with a block grid instead and that would work fine.

Malou Geurts over 4 years ago

I'm not using equalizer on the masonry items. My layout is like this.

<page data-equalizer>
  <left data-equalizer-watch>
    <!-- stuff goes here -->
  </left>
  <right data-equalizer-watch>
    <masonry container>
      <masonry item />
      <masonry item />
      <masonry item />
    </masonry container>
  </right>
<!-- loads of empty space where the equalizer should be watching -->
</page>

Does that make sense? I'm using masonry for blog items with varying heights, but the container around the masonry container should have the same height as the left sidebar. However instead of both the content and the sidebar being the height required, they get extra long after masonry has pulled the items closer together.