Jquery同位素:如何填补空白



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

这是一个演示,展示了我遇到的问题。

你看到这些空白了吗?有没有任何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. 选择固定宽度
  2. 根据元素的大小仔细排列元素,这样在您选择的宽度上就不会有间隙

当然,如果你的物品在大小和位置上不是静态的,或者你不能设置宽度,我想这不会太好。

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


E(4.22.2013):我注意到最近的一些活动,所以很快更新了。这一切都可以在砌体问题#141,第一个链接:

PerfectMasonry是同位素的布局扩展。它通过提供"perfectMasonry"布局模式和提供无间隙布局的选项来填补空白。

Nested是用于无间隙布局的替代库。

Packey是同位素的创建者创建的一个库,支持无间隙布局等。

我还没有亲自使用过这些。

最后,在他关于Packey获释的博客文章中,DeSandro表示:"最终,我想把这个和Packey开发的其他解决方案移植到Masonry和Isotope。"

我不会指望这会很快发生。截至本次编辑,Packey只发布了7天。

E2(2014年3月6日):

DeSandro发布了一个同位素的包装布局模式。

我试图解释为什么这是在这个重复的线程中,其中还包括一把小提琴。它不一定是固定的宽度,如果你有很多像最初演示中那样的小物品,那么舒适贴合的可能性很高,但不能保证。你可以使用另一个插件,比如jQueryTiles,或者尝试调整Wookmarks。

在您的案例中实现它并不是一件小事,查看所涉及的内容并搜索一些与之相关的图像,您将看到所涉及的复杂性。

最新更新