0

我第一次使用 jQuery Masonry。只是在我的电脑上让我的头撞到它显示给我的东西。

我有如下的jQuery：

$("#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，我认为不需要。

问题：

我应用了所有这些东西。包括 jQuery Masonry。一切都很好，但是当我刷新我的文档时。我所看到的？

所有的divs 都在彼此之上。但我认为控制台中可能会出现错误，指示错误类型。所以，我可以修复它。

当我单击“检查元素”时，我惊讶地发现所有divs 都按要求设置了。但是为什么它在页面加载时不起作用？我正在制作基本的多列布局。有任何风格干扰吗？

4

2 回答 2

1

setTimeout 函数可能适用于某些情况，但最好的解决方案是在调用 Masonry 之前等待图像加载，如下所示：

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

所以它会等待窗口上的所有内容加载，然后再计算每个项目的位置。SetTimeout 现在可能工作，但如果您的内容加载时间超过 1 秒，您肯定会遇到同样的问题。

于 2013-06-19T12:30:18.717 回答
0

我只是通过添加setTimeout功能让它工作。

setTimeout( function() {
  $("#box-container").masonry({
      itemSelector: ".box",
      columnWidth: 100
  });
}, 1000);
于 2013-02-17T15:57:24.590 回答