javascript - 无法获取 Packery 项目布局顺序

Question

我正在尝试使用 Packery 制作混合宽度/固定高度的布局。

虽然我可以让 Packery 工作，并且布置得很好——我需要知道布局完成后屏幕上显示的顺序(而不是 DOM 的顺序)，以便我可以对某些 block 进行一些调整如果它前面有另一个特定的 block 类型。

我有三个“ block 大小”——100%、33.3333% (1/3) 和 66.6667% (2/3) .这意味着，在某些情况下，如果有一个窄 block (1/3) 可以与更小的 block 并排放置，则 block 在屏幕上的位置与 DOM 不同(例如，向上)。

基本上我需要这个解决方案(拖/放后刷新项目的索引/位置)但在加载时:https://codepen.io/desandro/pen/mdJnF .这篇 SO 帖子也提到了这一点(略有不同，解决方案是相同的):Determine the alignment order of the items with packery

当我尝试实现获取元素及其位置的代码时，它只是吐出了 DOM 顺序，把东西扔了出去。我一辈子都弄不明白为什么它不起作用。

此处提供简化的测试用例:https://jsfiddle.net/4q73tbwe/1/

Answer 1

所以，我找出了问题所在。

默认情况下，布局方向是垂直的。将选项 horizo​​ntal 定义为 true 解决了这个问题，我现在得到了正确的索引号。