Question

我第一次使用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，我认为不需要。

ISSUE：

我申请了所有这些东西。包括jQuery砌体。一切都很好，但当我刷新我的文件。我看到了什么？

所有div都在彼此之上。但我想可能会在控制台中出现错误，指出错误的类型。所以，我可以解决它。

当我点击“Inspect Element”时，我惊讶地发现所有div都已根据需要设置。但为什么它不能在页面加载？我正在制作基本的多列布局。有什么风格干扰？

Answer 1

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

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

因此，在计算每个项目的位置之前，它将等待窗口上的所有内容加载。 SetTimeout现在可以正常工作，但是如果您的内容需要加载超过1个seconde，肯定会遇到同样的问题。

Answer 2

我只需添加setTimeout函数就可以了。

setTimeout( function() {
  $("#box-container").masonry({
      itemSelector: ".box",
      columnWidth: 100
  });
}, 1000);

jQuery砌体定位问题

2 个答案: