Jquery Isotope:如何填补空白？

Question

我已经尝试了基本上每一个提示/提示/建议来实现这一点,但仍然,我在使用同位素时得到了这些空洞的丑陋空间.

这是一个演示我正在遇到的问题的演示.

你看到这些空白？是否有任何jquery代码使底部项目有点填充这个空白？

如果我们对所有项目使用单一宽度,则问题根本不显示.当每个项目使用不同的宽度时,它会开始出现.如果有任何合适的尺寸项目,Isotope不够智能,无法查找空的间隙并填充它们.

有帮助吗？我真的被卡住了!

可能有助于解决此问题的补充问题:

有没有强制元素浮动的jQuery插件？我相信它可以强制装配物品填补空白点!

Answer 1

根据最新的编辑,现在有同位素的包装布局模式.原始答案和后来添加的内容仍然如下.

其他人也要求此功能:

• https://github.com/desandro/masonry/issues/141
• https://github.com/desandro/isotope/issues/125
• https://github.com/desandro/isotope/issues/197
• https://github.com/desandro/isotope/issues/198
• https://github.com/desandro/isotope/issues/219
• https://github.com/desandro/vanilla-masonry/issues/6
• 如何使用Isotope和Masonry布局来避免间隙

简而言之,目前的答案似乎是,如果你想完全避免差距,你应该:

1. 选择固定宽度
2. 根据尺寸仔细排列您的元素,以便在您选择的宽度上不会出现间隙.

当然,如果您的物品在尺寸和位置上不是静态的,或者如果您不能设置宽度,我无法想象这样做会很好.

如果手动排列元素以填充固定宽度容器的间隙对您不起作用,我建议在第一个链接上加注+1.

E(4.22.2013):我注意到最近的一些活动,所以快速更新.这在砌体问题#141中可用,第一个链接:

PerfectMasonry是Isotope的布局扩展.它通过提供"perfectMasonry"layoutMode和选项来填补空白,提供无间隙布局.

嵌套是无间隙布局的替代库.

Packery是Isotope的创建者的库,它支持无间隙布局等等.

我还没有亲自使用过任何这些(尚未).

最后,在他关于Packery发布的博客文章中,DeSandro表示"最终,我想把这个以及Packery开发的其他解决方案移植到Masonry和Isotope."

我不会指望很快就会发生这种情况.截至此编辑时,Packery仅发布了7天.

E2(6.13.2014):

DeSandro发布了同位素的封装布局模式.