11

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

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

你看到这些空白了吗?是否有任何 jquery 代码可以让底部项目在有任何时候填补这个空白?

如果我们对所有项目使用单一宽度,则根本不会出现问题。当为每个项目使用不同的宽度时,它开始出现。同位素没有足够的智能来寻找空白并在有任何合适尺寸的物品可用时填充它们。

有什么帮助吗?我真的被困住了!

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

有没有强制元素浮动的 jQuery 插件?我相信它可以迫使合适的物品填补空白!

4

2 回答 2

23

根据最新的编辑,现在有一个用于 isotope 的包装布局模式。原始答案和后来的补充仍然在下面。


其他人也要求此功能:

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

  1. 选择固定宽度
  2. 仔细排列元素的大小,以便在您选择的宽度上没有间隙。

当然,如果您的项目在大小和位置上不是静态的,或者如果您无法设置宽度,我无法想象这样会很好用。

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


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

PerfectMasonry是 Isotope 的布局扩展。它通过提供“完美砌体”布局模式和提供无间隙布局的选项来填补空白。

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

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

我个人还没有使用过这些(还)。

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

我不会指望这种情况会很快发生。截至本次编辑,Packery 仅发布了 7 天。

E2 (6.13.2014):

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

于 2012-08-24T23:00:36.500 回答
1

我试图解释为什么这是在这个重复的线程中,其中还包括一个可以玩的小提琴。不一定是固定宽度,如果你有很多像原始演示中的小物品,贴合的可能性很高,但不能保证。您可以使用替代插件,例如 jQuery Tiles 或尝试调整 Wookmarks。

在您的案例中实施并非易事,查看所涉及的内容并搜索与之相关的一些图像,您将看到所涉及的复杂性。

于 2012-08-25T15:41:15.833 回答