问题标签 [packery]

我有一个包装图像网格，当在 CSS 文件中设置 .item-content 的背景图像时，它可以工作并且响应：http: //codepen.io/anon/pen/eJdapq

但是，如果我改为删除硬编码的 HTML 元素：

并尝试在页面加载时通过 javascript/jquery 将这些项目动态添加到网格中：

这只是将它们添加到左侧的页面而不是网格中。有任何想法吗？

在进一步调查当我添加更多硬编码的 DOM 项而不是通过 javascript 添加的图像时，网格足够大时会完全遮盖图像。我怀疑在将图像添加到dom之前正在初始化packery。

我怎样才能让打包机等到我初始化所有的 HTML 元素？

我正在尝试将 Isotope 中的打包布局模式与 webpack 一起使用。

当前设置：

• Wordpress 自带的 jQuery 版本
• 咖啡脚本
• 修改后的 Gulp 启动器

这是我调用同位素包装布局的文件。

我不断收到错误Uncaught TypeError: Cannot read property 'packery' of undefined。这是文件中的完整控制台和参考。

我是 Webpack 的新手/需要模块，所以我可能会遗漏一些明显的东西。

这是我的 webpack 配置文件：

顺便说一句，我也无法识别同位素 jQuery 插件。 调用$('.grid').isotope()会导致Uncaught TypeError: $(...).isotope is not a function错误。我不确定它们是否有任何关系；即使我引用了 jQuery$ = require 'jquery'

任何帮助将不胜感激。

我Packery 用来显示图像网格。

这是我的相关 HTML：

这是CSS：

最后是 JS：

我的问题

当页面加载时，这就是我得到的：

注意滚动条，网格比屏幕宽。

如果我打开控制台、调整浏览器窗口大小或执行任何其他操作来触发刷新，它将变成这样：

水平滚动条消失了，项目之间没有间隙 - 它现在按预期工作。

为什么物品没有正确放置在首位？我查看了文档和一些使用该插件的笔/小提琴，但我看不出我缺少什么。

我尝试使用 延迟初始调用setTimeout()，但它不起作用 - 它只会延迟我得到第一个屏幕截图中显示的内容之前的时间，我仍然需要在项目移动到位之前手动调整窗口大小或触发刷新。

我正在尝试实现 packery.js 以显示迄今为止有效的各种元素的网格。元素的高度会有所不同，因此当网格中的单个元素大于其他元素时，下一行的元素会“停靠”到第一行的元素上。

打包机是否有可能使行高等于最大的行元素？

我发现了这个问题，答案对我来说是完美的。可以帮我实现这个问题的答案吗？可以进行此更改以ng-repet在 codepen 或其他地方使用吗？我不知道他说实施时是什么意思：

1）我必须使用带有控制器接收事件的指令

有人可以更好地解释如何在这个例子中使用nr-repeatwith吗？packery

我通过使用 packery 和 draggabilly创建了Demo ，其中我有五个网格。我可以使用 draggable 对它们进行排序。在我进行排序之后。我需要保存排序的网格。当我在 dev 中检查时，网格不会移动位置正在改变，而不是完全改变网格。

因为我已经通过了 ids，但没有用。由于上面提到的问题。

有没有办法保存排序顺序？我不想用localStorage

我的代码如下

HTML

JS

CSS

我在引导模式弹出窗口中有 5 个网格。

当我单击弹出按钮时，网格堆叠在另一个网格上。当我拖动一个网格时，整个 5 个网格正在正确累积。一旦完成。下次单击弹出按钮时它工作正常。

代码如下

小提琴演示在这里

我一直在尝试触发类似于页面调整大小的项目的包装动画。我希望在切换整页幻灯片时重新排序包装项目。我愿意使用不同的方法，但我已经开始尝试使用 fit 方法，当 fullpage.js 回调“onSlideLeave”和“afterSlideload”发生时触发。我的想法是将一个项目从整个网格的左侧移动到右侧以强制重新洗牌动画。我在 codepen 上创建了一个简化的测试用例，简化的测试用例。

我确定我错过了一些东西，或者我走错了方向，所以任何帮助都会很棒，谢谢！提到我正在使用 jquery 方法进行打包可能很重要。

我正在使用lazysizes来延迟加载我的图像，但也正在尝试使用Packery，但我不知道如何在lazysizes 加载我的所有图片后触发Packery 脚本，因为它不会正确布置图片。这是我的代码

我希望它在lazysizes 将“lazyloaded”类添加到img 类后触发，因为它用lazyloaded 替换了lazyload。

我目前正在使用Packery.js创建一个页面

现在，我有一个 4 块宽的非常简单的网格，当点击一个块时它会放大，有点像这个演示： http ://codepen.io/desandro/pen/pgVQLz

然而，在我的情况下，瓷砖是绘画，并且由于单击时它们会根据屏幕尺寸放大，所以我需要稍微滚动视口以使其完全可见并位于屏幕中央。

问题是，因为 Packery 动画瓦片的运动，我不能简单地使用：

因为在这种情况下，它会滚动到动画之前的位置。

解决此问题的最佳方法是什么？

我已经被困在这几个小时了。我什至尝试过：

...找到变换动画的偏移量，但除了脏 dix 之外，我什至找不到值...

谢谢！