我基本上尝试了每一个提示/提示/建议来实现这一点,但在使用同位素时,我仍然得到了这些空的丑陋空间。
这是一个演示,展示了我遇到的问题。
你看到这些空白了吗?有没有任何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
- 如何使用砖石布局的同位素来避免间隙
简而言之,目前的答案似乎是,如果你想完全避免差距,你应该:
- 选择固定宽度
- 根据元素的大小仔细排列元素,这样在您选择的宽度上就不会有间隙
当然,如果你的物品在大小和位置上不是静态的,或者你不能设置宽度,我想这不会太好。
如果手动排列元素来填充固定宽度容器的间隙对您不起作用,我建议在第一个链接上加+1。
E(4.22.2013):我注意到最近的一些活动,所以很快更新了。这一切都可以在砌体问题#141,第一个链接:
PerfectMasonry是同位素的布局扩展。它通过提供"perfectMasonry"布局模式和提供无间隙布局的选项来填补空白。
Nested是用于无间隙布局的替代库。
Packey是同位素的创建者创建的一个库,支持无间隙布局等。
我还没有亲自使用过这些。
最后,在他关于Packey获释的博客文章中,DeSandro表示:"最终,我想把这个和Packey开发的其他解决方案移植到Masonry和Isotope。"
我不会指望这会很快发生。截至本次编辑,Packey只发布了7天。
E2(2014年3月6日):
DeSandro发布了一个同位素的包装布局模式。
我试图解释为什么这是在这个重复的线程中,其中还包括一把小提琴。它不一定是固定的宽度,如果你有很多像最初演示中那样的小物品,那么舒适贴合的可能性很高,但不能保证。你可以使用另一个插件,比如jQueryTiles,或者尝试调整Wookmarks。
在您的案例中实现它并不是一件小事,查看所涉及的内容并搜索一些与之相关的图像,您将看到所涉及的复杂性。