javascript - Packery水平布局问题

Question

希望外面的人有一些 packery 的经验，我正在将其用于一个元素。

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

<div class="packery js-packery" data-packery-options='{ "isHorizontal": true }'>
...
</div>

尽管看起来宽度和高度并没有像文档中建议的那样通过 CSS 更改。但我没有进一步挖掘，因为我需要使用 Javascript。而等效项似乎根本不起作用:

$('.packery').packery({
    itemSelector: '.item',
    isHorizontal: true,
});

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

/* containers need height set when horizontal */
.packery.horizontal {
    height: 200px;
}

仍然，我插入的元素都看不到，包装厂 <div>是 4px x 0px。所以，我在 Javascript 中强制设置了容器的高度:

$('.packery').css('height', '400px');

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

$('.packery').css('width', '1000px');

但是这个宽度好像被忽略了。我可以强制 <div>在 Chrome 的开发者模式下使用元素编辑器来调整宽度，这会产生一些可见但丑陋的内容。但是我如何设置 <div> 挂起呢？在 Javascript 中的宽度？似乎 packery 覆盖了我设置的宽度，无论我是在调用 packery() 之前还是之后这样做.

Packery 中的所有内容似乎都适用于垂直布局。但我真的很想使用水平布局，但我显然做错了什么。谁能帮忙？

Answer 1

我对 isHorizo​​ntal 选项有类似的问题。我在包装厂周围的 div 宽度上使用我的 css 中的 !important 标签解决了这个问题。