CODEWITHSUNDEEP
jqueryjquery-plugins
Talha Akbar
Talha Akbar

Reputation: 10030

jQuery Masonry positioning issue

I used jQuery Masonry for the first time. And just crashing my head on my computer that what it is displaying me.

I have jQuery as follows:

$("#box-container").masonry({
    itemSelector: ".box",
    columnWidth: 100
});

CSS:

#content #left-content #box-container .box {
   width:280px;
   height:auto;
   margin:18px 0 0 18px;
   background:#fafafa;
   position:relative;
   min-width:230px;
   float:left;
}

HTML, I think is not needed.

ISSUE:

I applied all this stuff. Included jQuery Masonry. All fine but when I refreshed my document. What I see?

All the divs are on above of each other. But I thought may be there will be error in console indicating the type of error. So, I can fix it.

When I clicked "Inspect Element", I was surprised to see that all divs got set as required. But why it does not do on page load? I am making Basic Multi-column layout. Is any style interfering?

Upvotes: 0

Views: 2899

Answers (2)

enguerranws
enguerranws

Reputation: 8233

A setTimeout function might work on some case, but the best solution is to wait for images to load before calling Masonry, like that :

$(window).load(function(){
  // Call Masonry here
});

So it will wait for all content on window to load, before calculating position of each items. SetTimeout may work now, but you surely have the same issue if your content takes more than 1 seconde to be loaded.

Upvotes: 1

Talha Akbar
Talha Akbar

Reputation: 10030

I got it to work by just adding setTimeout function.

setTimeout( function() {
  $("#box-container").masonry({
      itemSelector: ".box",
      columnWidth: 100
  });
}, 1000);

Upvotes: 0

Related Questions