Jquery Isotope:如何填补空白?

时间:2012-08-24 20:45:07

标签: jquery jquery-isotope

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

我在demo showing the problem体验过。

你看到这些空白?是否有任何jquery代码使底部项目有点填充这个空白?

如果我们对所有项目使用单一宽度,则问题根本不会显示。当为每个项目使用不同的宽度时,它会开始出现。如果有任何合适的尺寸项目,Isotope不够智能,无法查找空的间隙并填充它们。

有任何帮助吗?我真的卡住了!

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

是否有任何强制元素浮动的jQuery插件?我相信它可以强制装配物品填补空白点!

2 个答案:

答案 0 :(得分:20)

根据最新的编辑,现在有一个packery layout mode for isotope。原始答案和后来添加的内容仍在下面。


其他人也要求使用此功能:

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

  1. 选择固定宽度
  2. 根据尺寸仔细排列您的元素,以便在您选择的宽度上无间隙。
  3. 当然,如果您的商品在尺寸和位置上不是静态的,或者您无法设置宽度,我无法想象这样做会很好。

    如果手动排列元素以填充固定宽度容器的间隙对您不起作用,我建议在第一个链接上加注+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并搜索与其相关的一些图片,您将看到所涉及的复杂性。