我已经尝试了基本上每一个提示/提示/建议来实现这一点,但是,在使用Isotope时我仍然得到了这些空洞的丑陋空间。
我在demo showing the problem体验过。
你看到这些空白?是否有任何jquery代码使底部项目有点填充这个空白?
如果我们对所有项目使用单一宽度,则问题根本不会显示。当为每个项目使用不同的宽度时,它会开始出现。如果有任何合适的尺寸项目,Isotope不够智能,无法查找空的间隙并填充它们。
有任何帮助吗?我真的卡住了!
可能有助于解决此问题的补充问题:
是否有任何强制元素浮动的jQuery插件?我相信它可以强制装配物品填补空白点!
答案 0 :(得分:20)
根据最新的编辑,现在有一个packery layout mode for isotope。原始答案和后来添加的内容仍在下面。
其他人也要求使用此功能:
简而言之,目前的答案似乎是,如果你想完全避免差距,你应该:
当然,如果您的商品在尺寸和位置上不是静态的,或者您无法设置宽度,我无法想象这样做会很好。
如果手动排列元素以填充固定宽度容器的间隙对您不起作用,我建议在第一个链接上加注+1。
E(4.22.2013):我注意到最近的一些活动,所以快速更新。这在砌体问题#141中可用,第一个链接:
PerfectMasonry是Isotope的布局扩展。它通过提供“perfectMasonry”layoutMode和选项来填补空白,提供无间隙布局。
Nested是无间隙布局的替代库。
Packery是Isotope的创建者的库,它支持无间隙布局等。
我还没有亲自使用过任何这些(还有)。
最后,在his blog post about Packery's release,DeSandro表示“最终,我想把这个以及其他解决方案在Packery中开发给Masonry和Isotope。”
我不会指望很快就会发生这种情况。在此次编辑中,Packery仅发布了7天。
E2(6.13.2014):
DeSandro发布了packery layout mode for isotope。
答案 1 :(得分:1)
我试图解释为什么这是in this duplicate thread,其中包括一个小提琴。它不一定是固定的宽度,如果你有许多像原始演示中的小物品,舒适合身的可能性很高,但不能保证。您可以使用替代插件(如jQuery Tiles)或尝试调整Wookmarks。
在您的情况下实施并非易事,请参阅what's involved并搜索与其相关的一些图片,您将看到所涉及的复杂性。