Masonry items overlapping…is it the callback?

  • Resolved Who_Dat

    (@who_dat)


    7 years, 9 months ago

    I’m using Masonry.js to lay out the items, and it’s working but before all the photos are loaded, so the blocks are overlapping unless you refresh the page. I added ImagesReloaded.js to fix that problem, but it persists.

    Then it occurred to me that it might be the callback in the plugin, which is this:

    $('#posts').masonry('reloadItems').masonry();

    (#posts is the div that holds all the masonry items, which have the class .itemBlock)

    Is there something wrong with the callback which is failing or preventing the ImagesReloaded script from working?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author craigramsay

    (@malinkymedia)

    Hi, the callback above will just layout the images. However you will need to call images loaded before this otherwise masonry won’t know the image sizes hence why they will overlap. You could try something like this. It’s untested.

    $('#posts').imagesLoaded( function() {
  $('#posts').masonry('reloadItems').masonry();
});

    This way once the images are loaded the callback will lay them out. https://imagesloaded.desandro.com/

    The other option depending on your design is to just give the images fixed heights.

    Hope that helps. Thanks

    Thread Starter Who_Dat

    (@who_dat)

    Thanks, that seems to have worked. There is quite a noticeable lag between the tiles loading and rearranging…but I imagine that’s the Masonry script and not the scrolling plugin.

    Plugin Author craigramsay

    (@malinkymedia)

    It may be to do with the image sizes that are being loaded. But yes you’re right once the plugin has fetched the next set of posts it just runs the callback so will be waiting for that after.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Masonry items overlapping…is it the callback?’ is closed to new replies.

Tags