4

This is my first question on StackOverflow, so please excuse any faux-pas I may make.

I have spent a few days trying to fix this problem on my own, to no avail. I have tried several snippets of code found on both stackoverflow and other places in order to try and fix the issue.

I am using a combination of Skeleton and Masonry to build my portfolio site. When I load the portfolio initially, there is only 1 tiny image. When I resize the first time, it displays all columns but the images overlap. When i resize again, the height of most of the tiles are correct, but the longer tiles (JSTOR) are still cut off. On the third resize (and all subsequent visits) the tiles are displayed correctly.

((EDIT: on page refresh (not clicking link again, but browser refresh) the grid also goes wonky....sometimes shows all the columns but some images are stacked, and sometimes shows 1 tiny picture only.))

I don't have the most thorough understanding of JS or jQuery, so a lot of my attempts to fix may have been clumsy. My assumption at this point is that masonry is creating the grid before hte images are loaded...I have tried various code bits to fix this, including Desandro's own imageload snippet and other responses here on StackOverflow like this one.

Right now my site should be live at new.rdhalexander.com. I'm not sure what other information is needed....but I will keep a close eye on this.

Community
  • 1
  • 1
Ray Alexander
  • 43
  • 1
  • 4

3 Answers3

7

UPDATE: Refer to @Stefan and his example. Apparently there is a new way.

Seems like the images haven't quite loaded before masonry decides to get their sizes.

You can Test with some simple css and you would probably see a delayed load,

.tile {
   position:relative !important;
}

and also try a long timeout something like

setTimeout(function(){
  .. masonry blah ..
},1000);

Then to solve the timing issue, this is what the author of masonry suggests.

$(window).load( function(){   $('#content').masonry(); });

link

Dylan
  • 4,703
  • 1
  • 20
  • 23
  • I took that last line you gave and re-worked my script around it. Once I realised that I would replace the "$('#content').masonry()" with whatever my specific arguements are...I think it worked! Thank you so much.....I feel sorta silly since something that I tried and didn't work worked once I looked at it with more critical eye. Thanks. – Ray Alexander Aug 19 '13 at 17:29
  • Ace...was head scratching for far too long there. – vincentieo Mar 26 '15 at 17:28
  • @Dylan please update your answer in 2020 please :-) you have my answer for example – Stefan Jan 28 '20 at 12:18
3

if anyone gets here from google, nothing else has worked for me except forcing the resize event manually

window.dispatchEvent(new Event('resize'));
user3441246
  • 63
  • 3
0

Why don't you all use Masonry Layout functionality?

Official statement:

Layout is useful when an item has changed size, and all items need to be laid out again.

So this reinit Masonry after some time. Like this you can call Masonry on ready

$grid = $('.grid-class').masonry();

setTimeout(function() {
  $grid.masonry('layout');
}, 500);
Stefan
  • 627
  • 6
  • 19