问题标签 [packery]

我正在尝试使用 packery 编写一个水平滚动、可拖动/可排序的列表。

基本上我想制作这个codepen的水平版本：http: //codepen.io/desandro/pen/cbhDG

我试图修改它，并且可以得到一个带有滚动条的水平列表没问题，问题是一旦我应用包装它想要垂直包裹单元格并且它似乎消除了溢出，我找不到方法控制包装容器的大小

到目前为止，这是我的尝试：http: //codepen.io/anon/pen/dPYXJG

哈姆：

CSS：

javascript:

任何帮助将不胜感激。干杯。

我在角度中使用 Dragabilly 时遇到了一个小问题，这个问题很奇怪，因为它一直在工作，直到我对使用 packery 的内容的加载方式进行了一些更改，特别是添加了一个嵌套重复级别。当我这样做时，packery 仍然可以正常运行，但是它似乎可以拖动只在第一个对象上运行。

html看起来像 -

所以这只是一个嵌套重复，其中包装器从外部项目中运行，并且包装器元素工作正常。当我在嵌套重复中添加时它坏了 - 这些对象有多个面，我用那一侧隐藏。你看到那里，但是拖动手柄在嵌套重复内，我认为这可能是问题，或者嵌套是加载时间更长，并且无法及时识别手柄？我不太确定，那是我可以使用一些方向的地方。

这是指令 - http://jsfiddle.net/yq4zwLzs/。我添加的唯一内容是移动 UA 检查以尝试关闭移动设备上的可拖动性，因为此时没有必要。我试过把它取下来似乎没有任何影响。

这是它的一个动作 -

http://plnkr.co/edit/HSVztH3vlf5VI1lf1tFR?p=preview

原谅丑陋 - 但如果你看，你可以移动顶部的项目，但不能移动底部的项目。这就是我被卡住的地方，我似乎无法弄清楚这是如何发生的或为什么会发生。您可以通过 .handle （标题元素）拖动项目。我将不胜感激任何帮助，因为我似乎被困在这里。

谢谢阅读！

更新

似乎即使我将 .handle 放在内部重复之外，它仍然存在同样的问题。也许它与内部重复和棱角分明的包装运行的顺序有关？

更新 2

似乎拖动句柄逻辑根本不起作用，您可以拖动任何东西，而不仅仅是 .handle

更新 3

我几乎可以肯定这与嵌套的 ng-repeat （也许它与指令如何在对象上运行交互）有关，因为无论我尝试什么，只要我有嵌套的重复，我就有相同的问题。如果我把它拉下来，它会恢复正常工作，但是如果没有它，我将很难实现我想要的目标:(。

还有——如果我转身

进入

它工作正常。不过，我需要一个拖动手柄，因为这些 div 中会有用户将与之交互的内容，并且我不希望 div 在他们在其中单击时四处移动。也许如果有一种方法可以稍后启动 Dragabilly？

这是我的代码笔：http: //codepen.io/helloworld/pen/JoKmQr

假设我从服务器获取了一组数据。数据有一个标题和一个订单号。

我有 5 个数组项，其中 orderNumber 从 1 到 5。

现在我想布局 5 个 div，每个 div 位于包装布局系统中的某个位置。

看这张图片：

颜色并不重要。重要的是根据订单号的 div 的顺序。

orderNumber的流程从上到下，从左到右。_ _

问题：

如何确定布局系统中 div 的顺序？他们会自动按照我想要的流程进行布局吗？或者提示手动订购也可以:-)

HTML

CSS

JS

我有一个整页的 Packery，我想缓慢而永久地向左移动。一切都很好，很漂亮，但是在 OSX（任何浏览器）上，动画偶尔会有一些抖动。

由于缺乏更好的解决方案，我translateX每 101 毫秒从 Packery 容器中减去 1。transform然后通过属性上的线性 0.1 秒过渡来平滑它。

在实践中;

Javascript

CSS

我有一种感觉是由于过渡动画和间隔减法以某种方式相互干扰。但是，这似乎不是 Windows 的问题。

有没有办法解决抽筋问题？是否有更好/更智能的方法来实现相同的效果？

我对 isotope metafizzy packery 的版本有疑问：

这是 js 版本 v1.1.0 = http://isotope.metafizzy.co/layout-modes/packery.html

这是 js 版本 v1.3.2 = http://packery.metafizzy.co/

但我的代码仅适用于此 v1.1.0 代码：

我怎样才能更新js代码？谢谢

好的伙伴们。基本上，当使用下面的代码时，我加载页面并且 .item div 之间有边距。但是，当我调整窗口大小时，边距消失了。

我不知道为什么。我不想要保证金。

这是一个codepen.io http://codepen.io/Ralphunter/pen/bNqwEX

这是一个codepen.io http://codepen.io/Ralphunter/pen/bNqwEX

我是一个业余爱好者和初学者，试图用流畅的图像网格制作我的第一个网页，用于相同高度的垂直和水平照片。所以我正在应用 Packery javascript 以使其更具响应性。

请参阅 Codepen 的链接：http ://codepen.io/nor159/pen/WbpWpe/?editors=110

我发现2个问题：

1) 当我调整屏幕大小时，图像之间的空隙会随机出现。

2) 在 Chrome 中加载会产生重叠的图像。

有谁知道如何解决这个问题？这个网格可以使用 Packery 制作吗？

对我的问题的回应将不胜感激。

问候 Jan，奥斯陆

我已经玩了几个小时的砖石、同位素和包装工，但我一生都无法让它按预期工作。

我的目标是创建一个帖子网格，帖子可以是两个宽度，父容器的 25% 或 50%。帖子的宽度是在服务器端随机生成的。但是，在某些情况下，第一行包含一个很大的间隙，可以放置一个帖子为了更好地说明这一点，我整理了一个小提琴

的HTML

JS

});

以及我正在尝试的完整小提琴 http://jsfiddle.net/nLqu015m/

在上面的例子中，我希望 packery 重新排列元素，以便红色元素是最后一项，在最后一项之前的行中没有难看的间隙。

我也尝试在 Isotope 中实现同样的目标，但面临同样的问题。

我是否遗漏了一些明显的东西，或者我误解了 Packary 和 Isotope 的目的？

任何帮助，将不胜感激。

目前，我正在使用基本的 Packery JS 和 Div 块为我的网站构建一个照片库，其中包含图像。

一切都包装得很好，但是从页面顶部滚动到底部并不是很流畅，大概是由于页面上的图像数量众多（截至目前为 35 个）。有什么方法可以提高滚动的流畅度吗？

我目前正在使用 Wordpress 开发一个网站。我已经达到了我无法理解的程度。我正在使用 Isotope 在我的网站的主要部分创建和过滤我的作品。现在，如果观众点击它，我想快速预览该作品。我想在选定的作品之后插入一个新的同位素项目，但每次尝试时我的网格都会崩溃或作品出现在网格后面。

我的CSS：

javascript:

和

我已经用 codepen.io 试过了：http ://codepen.io/anon/pen/ogwEJO 红色方块将是选定的大作品。那个有效。

我试图在 Wordpress 中做同样的事情，但红色方块总是消失。

我在上班时需要的帮助是实现我的想法。也许还有另一种解决方案。

谁能帮我解决这个问题？我真的很感激任何建议。

提前致谢。

• 双桅船