这是我经历的demo showing the problem.
你看到这些空白?有没有任何jquery代码,使底部的项目有点填充这个空白,只要有什么?
如果我们对所有项目使用单个宽度,则问题根本不显示.当为每个项目使用不同的宽度时,它开始出现.同位素不足以找到空隙,如果有适当尺寸的物品可以填满它们.
任何帮助?我真的卡住了!
可能有助于解决这个问题的补充问题:
有没有任何jQuery插件强制元素浮动?我相信它可以强制装配物品填满空位!
解决方法
此功能也被其他人要求:
> 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
> How to avoid gaps using Isotope with Masonry layout
总之,目前的答案似乎是,如果你想避免差距,你应该:
>选择固定宽度
>仔细安排您的元素相对于它们的尺寸,所以在您选择的宽度不可能有差距.
当然,如果您的项目的大小和位置不是静态的,或者如果您无法设置宽度,我无法想像这样会很好.
如果手动排列元素以填补固定宽度容器的空隙,则不适用于您,我建议在第一个链接上加入1.
E(4.22.2013):我注意到一些最近的活动,所以快速更新.这是所有可用的砖石问题#141,第一个链接:
PerfectMasonry是同位素的布局扩展.它通过提供“perfectMasonry”布局模式和选项提供了无缝布局来填补空白.
Nested是无间隙布局的替代库.
我还没有亲自使用过这些(还).
最后,在his blog post about Packery’s release,DeSandro表示:“最终,我想把这个在Packery开发的其他解决方案移交给Masonry和Isotope.”
不久之后,我不会指望这一切发生. Packery仅在此编辑之前已经发布了7天.
E2(6.13.2014):
DeSandro发布了packery layout mode for isotope.