Question

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

我在这里安装了masonary w /无限滚动：

我的问题是这个。

我想将“容器”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容器中并移动它/它们并遇到同样的问题。

Answer 1

您是否尝试过2，这意味着当您的所有内容都已加载时初始化Masonry？现在，你正如1 ...

那样做

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

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

2当所有内容都已加载时执行

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

3当浏览器首次遇到

时，会立即执行此操作

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

后者是一个自动执行的匿名函数（称为闭包），这非常方便，但不是在这里，因为当它自己没有内容或者没有正确的内容时 - 执行。

UPDATE 或者，你可以淡化你的#container，有时看起来也不错。见this fiddle here，与Masonry的大哥Isotope一样。

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

1 个答案: