Jquery同位素:如何填补空隙?

前端之家收集整理的这篇文章主要介绍了Jquery同位素:如何填补空隙?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经尝试基本上每一个提示/提示/建议来实现这一点,但是我仍然使用同位素,这些空的丑陋的空间.

这是我经历的demo showing the problem.

你看到这些空白?有没有任何jquery代码,使底部的项目有点填充这个空白,只要有什么?

如果我们对所有项目使用单个宽度,则问题根本不显示.当为每个项目使用不同的宽度时,它开始出现.同位素不足以找到空隙,如果有适当尺寸的物品可以填满它们.

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

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

有没有任何jQuery插件强制元素浮动?我相信它可以强制装配物品填满空位!

解决方法

根据最新的编辑,现在有一个 packery layout mode for isotope.原来的答案和以后的补充仍然在下面.

功能也被其他人要求:

> 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
> How to avoid gaps using Isotope with Masonry layout

总之,目前的答案似乎是,如果你想避免差距,你应该:

>选择固定宽度
>仔细安排您的元素相对于它们的尺寸,所以在您选择的宽度不可能有差距.

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

如果手动排列元素以填补固定宽度容器的空隙,则不适用于您,我建议在第一个链接上加入1.

E(4.22.2013):我注意到一些最近的活动,所以快速更新.这是所有可用的砖石问题#141,第一个链接

PerfectMasonry是同位素的布局扩展.它通过提供“perfectMasonry”布局模式和选项提供了无缝布局来填补空白.

Nested是无间隙布局的替代库.

Packery是同位素创建者的一个库,它支持无缝布局等等.

我还没有亲自使用过这些(还).

最后,在his blog post about Packery’s release,DeSandro表示:“最终,我想把这个在Packery开发的其他解决方案移交给Masonry和Isotope.”

不久之后,我不会指望这一切发生. Packery仅在此编辑之前已经发布了7天.

E2(6.13.2014):

DeSandro发布了packery layout mode for isotope.

猜你在找的jQuery相关文章