jQuery masonry issue with display and height on load

Question

I have a masonry container inside of a div that has display:none in inline style. Because I have a few divs, when the page loads it switches like a slideshow when their button is clicked. This interferes with masonry's ability to gauge the height on load so consequently the bricks spill out of the container.

Solution

Update: the .load() part of my answer is not how this should be done.

See: http://masonry.desandro.com/layout.html#imagesloaded

---

You can fix it by:

• Adding overflow: hidden to .panel to clear the floated elements inside.

• Running Masonry on .load() instead of .ready():

  <script type="text/javascript">
      $(document).load(function (){
        $('#contain').masonry({
          itemSelector: '.item',
          columnWidth: 100
        });
      });
  </script>
  

Version with those fixes: http://jsbin.com/oyido4/4

Comments

[nkcmr]

perfect! thanks. i knew about using overflow to clear floated elements but it was running masonry on LOAD that got it done.

[thirtydot]

See the update to my answer. .load() does work, but it will keep Masonry waiting for everything on the page to be loaded, instead of just the images inside #contain.