问题标签 [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 投票
4 回答
2376 浏览

packery - 有没有办法只使 Packery/Draggabilly 容器的一部分可拖动?

有没有办法只使 Packery/Draggabilly 容器的一部分可拖动?比如说,只使下面示例中的 .chartHeader 可拖动 - 但让整个 .chartContainer 整体移动?目前,只有 .chartHeader 是可拖动的,其他所有内容都留在后面。我想让一切都像一个幸福的大家庭一样立即行动起来。

这是一个小提琴:http: //jsfiddle.net/uD5rG/

提前致谢!

这是我的 packery/draggabilly 配置:

0 投票
2 回答
451 浏览

javascript - 按数据属性过滤对象并在每次使用时重置过滤器

我试图模仿 JQuery 的 Isotope 插件的过滤功能,因为我需要过滤图像,但实际上使用 Isotope 会导致页面上的某些视差缩放元素出现问题。

我编写了这个简短的 JQuery 片段来切换其中没有数据属性data-filter的图像。除了Packery插件不会在删除不匹配的项目后重新排序项目之外,它工作正常。

我遇到的问题是,一旦单击另一个过滤器链接,我需要重置过滤器,就像单击另一个过滤器一样,第一个过滤的元素会消失,并且除了过滤的元素之外的所有其他元素都会返回。我确信解决方案很简单,但我对 JQuery 的了解非常有限,所以不知道如何解决这个问题。

代码

我也无法通过一个链接将所有元素返回到可见状态,非常感谢任何帮助。

0 投票
1 回答
1293 浏览

javascript - 我可以破解 Packery.js 来创建圆形垃圾箱包装吗?

Fuseki.net 的 rect 这是在 python 中实现的更多测试

我对使用Packery.js jQuery 插件进行基于 js/DOM 的 bin 打包的上图中的结果(在 python 中实现)感兴趣。Packery 被构建为从左到右,从上到下工作,但我想知道是否使用圆形边界框而不是视口作为其边界可以做到这一点。

最终,我想用它来呈现许多具有各种尺寸和比例的图像缩略图。

任何代码示例或其他指针将不胜感激。

这是一个 CodePen 供您使用:
0 投票
1 回答
1011 浏览

php - 使用 AJAX 触发时,如何保留 archive.php 循环过滤器?

我一直在研究这个Getting Loopy教程,将帖子附加到我的Packery.js 布局上,它在我的主页上运行良好,但每当我尝试将它用于我的存档 (archive.php) 页面时,它会继续加载所有帖子而不是特定于该类别的帖子(或搜索查询等)。如何在使用 AJAX 触发它时保留过滤 WordPress 的 archive.php 循环似乎固有的?

目前,我<?php while (have_posts()) : the_post();?>在archive.php 页面上有一个标准作为主循环,它正确调用了前十二个类别的帖子。然后我一直在尝试使用第二个循环来附加额外的帖子。正如我之前所说,这会调用所有帖子(不仅仅是类别)。我目前的尝试是在第二个循环中识别类别,但我似乎弄错了。相关的当前代码如下(未更改的代码在上面的教程链接上)。有任何想法吗?谢谢!

页脚中的 AJAX 触发脚本:

archive-more-loop.php 的基础:

0 投票
1 回答
1928 浏览

javascript - 将项目动态添加到 Packery。它是如何工作的?

我想将 ajax 返回的项目附加到 Packery,删除当前项目并布局新项目。

我用 Metafizzy(开发人员)的分叉笔在 codepen 上工作

这是我想要的确切功能:http: //codepen.io/anon/pen/Cnbxu/

但是,在我的代码案例中,我不必创建 items 数组或将其添加到 DOM,因为我正在使用已创建的元素数组。

这是我正在使用的代码示例。

元素在那里,console.log($(data)) 显示响应,当我检查 Inspector 时,我可以看到容器 div 内返回的元素。问题是,无论我做什么,我都无法让 Packery “识别”新项目并相应地对其进行布局。elems 返回空。我已经使用了 addItems()、preppended() 和 appended() 方法,但无济于事。

有什么帮助吗?

0 投票
2 回答
3695 浏览

jquery - 具有缩放以适应容器的砌体网格布局

所以我正在尝试做这样的事情:http: //prothemeus.com/demo/litho/

我遇到过: http ://masonry.desandro.com/、http : //isotope.metafizzy.co/http://packery.metafizzy.co/,它们都非常相似,但没有一个提供像顶部的网站一样缩放。我将如何使用这些插件之一创建类似的东西,或者有人知道默认情况下提供缩放以适应容器的选项吗?

就演示而言,我能够发现 isotope 处理布局,但我无法追踪进行实际缩放的代码。

任何帮助将不胜感激。

0 投票
1 回答
974 浏览

packery - 将 Packery 与多个容器一起使用?

嗨,我正在尝试使用 packery 库来放置包含各种项目的外观书。每个项目都有一组图像,这些图像正在使用打包机来打包它们。

我已经为每个容器创建了容器 div,但 packery 似乎只在处理第一个容器。谁能帮我?

这是HTML

这是非常基本的javascript:

});

0 投票
1 回答
526 浏览

javascript - Infinitescroll、packery 和 canvas

我正在尝试实现无限滚动打包。我绝不是一个编码员,但这是我能够开始工作的:

问题是,我还想将 packetry.spaces 与画布结合使用来填充元素之间的间隙,例如以下示例:http ://codepen.io/desandro/pen/shleG

我对代码没有深入的了解,但是我已经能够得出一个令人满意的结果,其中主要是在这里复制和粘贴,这涉及到这一行

等等但是......当我以这种方式启动包装时,我只能让它工作:

并且在使用 querySelector 启动它时,我无法使无限滚动在同一个“容器”上工作。

所以现在我有使用packery的无限滚动或填充间隙,但不是两者兼而有之。

如果有一种简单的方法可以使这一切正常工作,我真的很感激任何提醒!

0 投票
1 回答
1388 浏览

css - 带引导程序的包装定位

我有一个两列布局,主列中有 Packery。

这在超小型设备、小型设备和大型设备上运行良好。在中型设备上,“2 列框”不在另一侧。它在它下面跳跃。

我对这个问题做了一个codepen:http: //codepen.io/anon/pen/pwJsa

我希望有人能帮忙!

0 投票
1 回答
4442 浏览

jquery - JQuery IAS Infinite Scrolling + Packery:未定义 IASCallbacks

我在Tumblr 主题设计上使用Jquery Infinite AJAX 滚动实现 Packery 时遇到问题。它不断返回“未捕获的 ReferenceError:IASCallbacks 未定义”,我无法确定原因。

这是我总结的,但我在 Javascript 方面并不擅长。

如果有人可以提供帮助,将不胜感激。查看http://digitalsocialnetwork.tumblr.com/上的实时页面