javascript - jQuery masonry issue with display and height on load - Stack Overflow

admin管理员组

文章数量:1356595

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.

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.

• javascript
• css
• height
• jquery-masonry

Share Improve this question Follow edited Aug 2, 2013 at 15:42 Roch 22.1k2929 gold badges8080 silver badges123123 bronze badges asked May 29, 2011 at 18:16 nkcmrnkcmr 11k2525 gold badges7070 silver badges8888 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

See: http://masonry.desandro./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./oyido4/4

本文标签： javascriptjQuery masonry issue with display and height on loadStack Overflow