CODEWITHSUNDEEP
jquerycssloadonload
JByrne
JByrne

Reputation: 75

Masonry is not working until resize window

I have seen this posted a couple of times on here but neither had a solution which has worked.

I am using jquery masonry to lay out lots of divs with an image and caption inside.

I have set "height:auto;" for the css of each item in the masonry. I expected that once the window has loaded then the masonry would take effect and lay out the content as it should. Unfortunately, it loads with 4 columns but the images are all overlapped in height. If i set the height in px for the css then it works, but the website is responsive and I need the height at auto preferably, as I don't want to change the css height through each media query...

Appreciate any help :)

Thanks

The JS code is:

    $(window).load(function()
{
    var columns    = 4,
        setColumns = function() { columns = $( window ).width() > 700 ? 4 : $( window ).width() > 480 ? 2 : 1 };

    setColumns();
    $( window ).resize( setColumns );

    $( '#container' ).masonry(
    {
        itemSelector: '.item',
        gutterWidth: 66,
        isFitWidth: true,
        isAnimated: true,
        columnWidth:  function( containerWidth ) { return containerWidth / columns; }
    });
});

Upvotes: 3

Views: 4597

Answers (3)

hellojebus
hellojebus

Reputation: 3603

You should definitely use imagesLoaded: http://imagesloaded.desandro.com/

Implemented as so:

  //le masonry
  var freeMasonry = $('.masonry');

  freeMasonry.imagesLoaded()
    .done(function(){
      freeMasonry.masonry({
        itemSelector: 'img'
      });
    });

Upvotes: 5

JByrne
JByrne

Reputation: 75

I had to apply a height:XXpx'to each item in the masonry. And then alter that height for the @mediaqueries. Not quite what I was hoping but it worked! Thank you for your idea though.I'm may have just implemented it incorrectly.

Without the height in the CSS for the items in the masonry, it simply overlapped the images etc. I am told through research the .imagesloaded function can be used to achieve this by setting the div height after the images inside the div have loaded. But for me this was the simplest solution.

Upvotes: 2

Matthew R.
Matthew R.

Reputation: 4350

It might simply be that your browser needs to redraw the elements. Here is a jquery function that may fix your problem.

Just call that function after masonry initializes and see if that fixes your problem.

Upvotes: 0

Related Questions