2

前言： Masonry 是一个 JQuery 插件，它在一个页面上创建 html 页面的“砖式”布局。Infinite scroll 是一个插件，允许以 pintrest 样式滚动页面项目。

我在这里安装了带有无限滚动的砖石：

http://helpknow.com/black2/

我的问题是这个。

我想定位“容器” div 以使页面中的整个项目列表居中。

所以我使用这样的一些代码：

#container {
  left:140px;   // <---- Positioning 
  padding:10px;
  background: #FFF;
  padding: 5px;
  margin-bottom: 20px;
  border-radius: 5px;
  clear: both;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;

}

问题是当我这样做时，在打开页面时会出现一个快速的“闪烁跳跃”，所有砖石项目都会移动到它们的位置（您可能无法在刷新时看到它，只能在初始页面加载时看到）。我不想要这个。我希望这些项目不会“闪烁”。我希望它们在用户滚动之前显示为静态，然后我希望动画按预期发生。当我删除左侧定位时，不会发生此问题（但显然项目向左浮动并且未居中，这不是我想要的）。我尝试将主 div“容器”和其他项目包装在一个新的 div 容器中并移动它/它们，但遇到了同样的问题。

4

1 回答 1

2

您是否尝试过 2，即在加载所有内容后初始化 Masonry？现在，您正在按照 1 中的方式进行操作...

1 这会在 DOM 构建完成后，在所有内容加载完成之前执行

$(document).ready(function(){ ... });
$(function(){...}); // short form

2 这会在所有内容加载完成后执行

$(window).load(function(){ ... });

3 当浏览器第一次遇到它时立即执行

(function(){ ... })();

后者是一个自执行的匿名函数（称为闭包），非常方便，但这里不是，因为它自执行时可能没有加载任何内容或没有加载正确的内容。

更新或者，您可以淡入您的#container，有时看起来也不错。在这里看到这个小提琴，它与 Masonry 的大哥 Isotope 一样。

于 2012-09-02T06:49:49.000 回答