我正在使用这个 jquery 插件http://packery.metafizzy.co/来创建动态网格布局。该插件运行良好。

问题是 ：

我正在尝试创建一个选项以在单击事件上添加动态网格。如果我手动为网格编写 html 代码，那么网格会完美显示，但是如果我使用 jquery 将网格代码附加到我的模板布局中，那么网格会从布局的最顶部显示，并且插件似乎没有调整格位置。

您可以检查我的代码并在此处查看问题：http: //jsfiddle.net/A7ubj/2/

我认为该插件没有调整网格，因为我的 jquery 附加代码使网格位于顶部。

你能告诉我如何附加网格以便插件可以完美地调整网格吗？

这就是我附加的方式：

这是我的整个代码：

JS：

CSS：

HTML：

我正在使用packery制作动画。瓷砖在网格中对齐，单击一个应该放大它并相应地动态重新排列瓷砖。使用 CSS3 过渡动画调整大小。所有这些都在 IE10 和 Firefox 中按预期工作，如以下代码笔所示： http ://codepen.io/anon/pen/ilkmK

基于 WebKit 的浏览器（在 Windows 上测试）中的相同代码在调整大小和重新定位时会产生疯狂的摆动/晃动。

我已经提交了一个问题，问题似乎是 WebKit 中的宽度和高度转换没有优化。使用 jQuery.animate 实现相同的动画稍微改善了这种情况，但它并没有摆脱摆动。特别是在较慢的系统上，它仍然非常明显。

现在我使用 JavaScript 版本作为稍好一点的 fallbackf 或 webkit 浏览器，但它不是最佳的。我不知道从这里去哪里，所以我希望 Stackoverflow 可以帮助我。

对于如何在 Chrome/Safari 中进行这项工作的任何提示，我将不胜感激。

我发现了一个非常酷的脚本，叫做“Packery”，并决定使用这个来代替更著名的网格脚本。

但是脚本提供的站点上只有很少的文档，所以我真的很想知道将它与 WordPress query_posts 和 Infinitescroll 以及 imagesLoaded 集成的方式。

1. 包装厂
2. 无限滚动
3. 图片已加载

通过使用这些，我设置了示例 WP 站点，如下所示，但它也无法使用 Infinitescroll 和怀疑 imagesLoaded。

index.php/WordPress

这是示例站点 URL http://itadakimasu.sakura.ne.jp/packery/，看起来 Packery 和 Draggy 脚本工作正常，但无限滚动必须是 NO...

还有一个问题，我遇到了如何在页面加载时使用 imagesLoaded JS 的“进度”动画而不首先依赖“附加选项”，这意味着当页面加载时，然后在 query_posts 分心的帖子中逐步显示图像。

我发现这段代码如下，但不知道如何重用这个适应页面加载效果。

参考：http ://codepen.io/desandro/pen/xtzmg

我不知道如何很好地使用附加选项，所以我很难自己修复它。

欢迎任何帮助。

此致，

试图让Packery.js与我正在使用的angularjs应用程序一起工作。

出于某种原因，他们似乎在一起玩得不太好。我认为这可能会通过isInitLayout错误的设置来解决，但是仍然没有爱。

这是我的（引导 3）HTML：

我开始怀疑这是否是因为我正在使用的 Artifact 指令......

我被困在这里。

我如何转换这个：

进入 jQuery 动画？
我正在使用这个脚本，使用 Packery/Masonry 制作一个“onload”动画，所有项目都从左上角缓和到它们的位置。
不幸的是，当您调整浏览器大小时，这种 css3 转换会导致打包脚本抖动。一个解决方案是使用 jquery 动画。

有任何想法吗？

我正在使用packery，它看起来不错-我真正想做的是在负载上进行转换。

当我使用内置功能添加（附加）项目时，它有一个很好的过渡，但我试图在加载的第一批瓷砖上获得它，而不必添加这些项目。

这是我运行的代码

并且该代码在使用 jQuery 准备好的文档上运行。

我在文档中看不到启用此功能的任何选项-我认为这是一个选项

谁能帮忙？

干杯

我已将 packery 添加到我的开发站点以使用新布局 - 它运行良好，因此我已将相同的代码投入生产。出于某种原因，它不会通过我的 prod 实例执行。我最初的想法是当我运行我的预编译时它的代码排序问题。

这是我的开发实例，显示了工作代码。这是我的 prod 实例，其中代码似乎没有初始化。

这是我的CSS：

我的jQuery：

我目前还没有使用点击功能，但计划在未来使用，所以它保留在代码中。

还有我的html：

部分的：

可能是当我的预编译运行时，我的 jquery 被插入到 packery.js 上方，因此它没有按预期初始化？

原始问题：

好的，这是简单明了的 css。但是我的网站上有一个错误，我无法解决！

我用这种设计制作了一个网站：http: //cl.ly/image/1j231y2x3w07

该网站我完全响应并利用 css-aspect-ratio-technique：

HTML：

CSS/少：

你明白它的要点。

我还使用了出色的插件Packery.js来跟踪浮动和位置。我主要用作调整大小和动画助手。

但是完全响应给了我一个问题。例如，当浏览器窗口宽度为 1304 像素时，由于上述技术，我得到了一些奇怪的高度值（例如 477.4 像素）。由于奇数，我无法保持我的网格，更不用说我的设计了。

如果窗口宽度不能被 4 整除，我会得到重叠或 1 像素的白线。

我已经为此工作了一段时间，需要一些新的眼光。所以，如果有人对解决方案有意见，我会非常高兴。谢谢 ：-）

解决方案：

非常感谢@ScottS – 很好的建议！