定位时页面加载时砌体/无限滚动“跳跃闪烁”

Question

前言： 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;

}

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

Answer 1

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

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

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

2 当所有内容都加载完毕后执行

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

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

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

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

更新 或者，您可以淡入您的#container，这有时看起来也不错。请参阅this fiddle here，它对 Masonry 的大哥 Isotope 也是如此。