问题标签 [packery]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
355 浏览

javascript - 使用无限滚动时,画布最终太大而无法写入

对于我的 tumblr 主题,我正在canvas为背景绘制东西,但是使用无限滚动,它不会花费太长时间才能canvas绘制太大(取决于浏览器等 - 没有达到极限在 Chrome 中)。

我正在使用,canvas因为它被建议用于填补帖子之间的空白(在packery中)here,但我想知道创建一个带有背景的绝对定位元素是否会是一个更糟糕的解决方案,而不是在调整大小时破坏和重新创建/重新布局。

最好的解决方案是什么?每当加载更多帖子时,我是否应该在 javascript 中即时创建更多画布,如果是这样,最好的方法是什么?废弃画布并使用绝对定位的元素会是一个可怕的想法吗?

0 投票
1 回答
270 浏览

jquery - packery fit方法(jQuery)的第二个参数?

我正在使用打包库。

问题是关于fit方法的第二个参数。该文件说它应该是一个元素,但我不知道“元素”是什么意思。

以下链接是我的问题的一个示例。

关联

当我单击调整大小按钮时,fit似乎不起作用。如果它正常工作,当我调整“post 1”的大小时,“post 2”应该转到第二行而不是重叠。

以下链接是我的意思的一个例子,但我希望通过按钮来触发。

关联

0 投票
1 回答
1148 浏览

jquery - 打包重叠,通过ajax添加html元素时布局方法无法正常工作

示例不起作用

上面的链接是我的问题的一个例子。span当我在via添加一些文本时ajax,它们divs是重叠的。

但是,如果我添加没有 的文本ajax,则该layout方法有效。示例工作没有ajax

divs通过添加新元素后有什么方法可以重新布局ajax

0 投票
1 回答
813 浏览

javascript - Packery 水平布局问题

希望那里有人对我正在用于项目的包装有一些经验。

我无法让水平布局工作。在 HTML 中声明 packery 对象似乎有点工作。

虽然看起来宽度和高度并没有像文档建议的那样通过 CSS 改变。但我并没有费心进一步挖掘,因为我需要使用 Javascript。等效的似乎根本不起作用:

这导致<div>包装对象被分配给 0px 高和 4px 宽的元素。(4px 宽度可能来自某些项目的 1px 边框。)packery 文档说水平布局需要设置高度。但是文档提供的 CSS 似乎什么也没做,无论 packery 是用 HTML 还是 Javascript 初始化的:

尽管如此,我插入的所有物品都不可见,并且包装<div>是 4px x 0px。所以,我在 Javascript 中强制容器的高度:

这确实增加了元素的高度,但宽度保持在四。因此,所有元素基本上都是零宽度且不可见。所以,我尝试强制容器的宽度:

但是这个宽度似乎被忽略了。我可以在 Chrome 的开发者模式下使用元素编辑器强制<div>' 的宽度,这会产生一些可见的,虽然丑陋的内容。但是如何<div>在 Javascript 中设置 ' 宽度?似乎 packery 覆盖了我设置的宽度,无论我是在调用packery().

packery 中的所有东西似乎都适用于垂直布局。但我真的很想使用水平布局,但我显然做错了什么。任何人都可以帮忙吗?

0 投票
1 回答
1953 浏览

javascript - 带有可拖动 div 的 Packery 布局不遵守项目顺序

我在 Angular.js 应用程序中使用 Packery & Draggabilly 来创建类似仪表板的设置,用户可以在其中动态创建添加到 Packery 布局的窗口。我认为,我遇到的问题与将 Packery 和 Angular.js 正确地结合在一起有关。

总体而言,布局工作正常:div 被正确添加,它们的顺序可以通过在画布上拖动来更改,并且可以删除。问题是如果改变了 div 的顺序并在布局中添加了一个新的 div,那么这些 div 就会重新定位到旧位置。例如:

  1. 添加 div A、B 和 C。A 现在是画布上的最左侧。
  2. 将 A 拖到 C 后面,所以新的顺序是 B、C、A。
  3. 添加新的 div,D。
  4. 出于某种原因,div 的新顺序现在是 A、B、C、D。我所期望的是,在布局中的新 div 之后,将尊重 A 的拖动位置。

包装指令:

包装画布上单个 div/窗口的指令:

我怀疑要么

a) 我没有捕获所有必要的 DOM 操作(除了通过拖动添加、删除和更改顺序之外还有其他操作吗?)这会导致 Packery 实例不同步,或者

b) 需要在这些 DOM 操作上调用其他 Packery 方法。

有任何想法吗?我究竟做错了什么?

0 投票
0 回答
571 浏览

javascript - Draggabilly 和 Packery 突出显示放置区域

我的问题与一个名为packery的优秀 JavaScript 库有关,我用它来创建砖石风格的布局。我还使用了一个名为draggabilly的姊妹脚本,以允许用户拖放(重新排序)页面中的项目。目前我正在做一些与传统用法非常相似的事情:http: //codepen.io/desandro/pen/CKbkw

当您拖动一个项目时,界面会留出足够大的空间来放置该元素。我想在此处临时放置一个 div 以表明这是元素将被删除的位置。我真正需要的是一种方法来获取 x,y 坐标,以了解一旦被拖动的元素将在哪里停止,但我似乎无法弄清楚如何获取该信息。

我正在使用一个 dragMove 侦听器,我希望在该侦听器中显示我的 div 并为其提供正确的坐标:

任何帮助将不胜感激。

0 投票
0 回答
88 浏览

jquery-mobile - jQuery页面过渡重置高度

我正在使用 packery 打包多个页面,并使用 jquery mobile pagecontainer 进行转换。在每次转换时,包装布局都会折叠。我的容器 div 的高度变为 0。

如何在页面转换时保留包装布局。

提前致谢。

0 投票
2 回答
743 浏览

polymer - 如何使用带有聚合物元素的包装?

我一直在寻找如何将包装与聚合物元素结合使用几个小时。我想要实现的是一个作为内容列表的元素,其中包含一个作为内容项的元素。我想将内容项目“打包”。

澄清:

0 投票
1 回答
432 浏览

jquery - 使用 packery.js 时在父 div 中居中多个 div

小提琴

我有一个以基础为中心的 div。在那个 div 里面,我有 215 x 215 的 div,里面有我所做工作的背景图片。

我已经让packery工作得很好。我的问题是我想将这些 div 放在它们的容器中。但我永远不知道一行会有多少个 div,所以我不能只给它们填充,因为如果我给填充的图像进入新行,它会搞砸。

我怎样才能解决这个问题?

谢谢!

这是我的 HTML

CSS

0 投票
1 回答
974 浏览

javascript - Packery 将项目垂直拖放到可排序网格中时,垂直对齐中断

我在尝试使用 packery 和 draggabilly 创建可排序的项目网格时遇到问题。

我也尝试过 jquery ui dragabble 并且问题仍然存在。当我拖放项目时,可能会破坏垂直对齐方式,因此项目“捕捉”到行的一部分。这也破坏了项目的顺序。

http://jsfiddle.net/foobass/sasrx654/

如果您水平拖动一个项目,它会卡入到位并很好地对齐。如果您垂直拖动,您可能会失去对齐,它不会正确卡入到位。最后一项的位置也发生了变化。

谁能建议我可能做错了什么?

似乎由于某种原因,被丢弃项目的“顶部”css 值和下面的项目被动态设置为不正确的值。