javascript jQuery 砌体问题，显示和加载高度

jQuery masonry issue with display and height on load

提问by nkcmr

I have a masonry container inside of a div that has display:nonein 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.

我在具有display:none内联样式的 div 中有一个砖石容器。因为我有几个 div，所以当页面加载时，当点击他们的按钮时，它会像幻灯片一样切换。这会干扰砌体测量负载高度的能力，因此砖块会从容器中溢出。

回答by thirtydot

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

更新：.load()我的答案的一部分不是应该如何完成。

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

请参阅：http : //masonry.desandro.com/layout.html#imagesloaded

---

---

You can fix it by:

您可以通过以下方式修复它：

• Adding overflow: hiddento .panelto clear the floated elementsinside.

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

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

• 添加overflow: hidden到.panel以清除浮动元素里面。

• 运行 Masonry.load()而不是.ready()：

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

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

带有这些修复的版本：http: //jsbin.com/oyido4/4