4

我正在使用 masonry 来显示内容，masonry.desandro.com，问题是它没有为容器提供适当的高度，好像你知道，masonry 动态地为容器提供高度和内部项目的边距样式，但它不能作为它应该。这是砌体js。

$(function(){
      $('#ItemContainer').masonry({
        // options
        itemSelector : '.item'
      });
    });

这是我的 html 骨架

<html><body>
<div id="content">
  <ul id="ItemContainer">
    <li class="item">here li content with block style</li>
    ....more li's
  </ul>
</div>
</body></html>

但是当我为每个 li 设置高度时，它工作正常，但是其中的图像可以有任何高度，所以我必须保持它的高度为自动。第二行项目在第一个的前一半重叠，第三个在第二个，依此类推......每次它给 ItemContainer 提供 426px 的高度。

在这里我上传了我的代码... www.testingmycode.comuv.com/rough2.html ...请结帐。它显示不需要的行为，按重新加载，瓷砖排列就像 MS windows 中的纸牌游戏一样，当你调整窗口大小时，它们排列正确......按浏览器的重新加载按钮 2-3 次，调整窗口大小以查看它们. 请结帐。

4

2 回答 2

6

我看不到您的代码，但您必须使用该imagesLoaded()方法。

var $container = $('#container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.item',
    columnWidth : 240
  });
});
于 2013-02-21T00:10:17.877 回答
0

我认为这是清除 div 的问题..

将此代码放在代码中的某些位置并检查..

<div style="clear:both"></div>

如果您在某处使用了 float，通常会发生这种情况，并且一旦您放置它就会正常工作

于 2012-08-17T11:50:16.420 回答