jQuery：类似于砌体布局的插件，能够克服DOM顺序和3种不同物品大小的问题。

Question

jQuery：类似于砌体布局的插件，能够克服DOM顺序和3种不同物品大小的问题。

jqueryresponsive-designmedia-queriesjquery-masonry

16

这可能很难解释。是否有类似于jQuery砌体的插件，能够检测预定义网格中的空间，并移动和定位适合该空间的元素？

由于我提出问题的所有其他方式都太复杂了，我画了一张简单的图来说明我的意思。

注意：这是一个流体响应式网页设计。

enter image description here

我的dom顺序是1,2,3。然而，当在某个媒体查询中折叠我的布局时，我希望动态地切换dom顺序或以不同的位置放置元素，就像您在示例中看到的那样。

我知道有一些类似jQuery Masonry或jQuery Isotope的东西，但这两个插件都不能填充网格的所有空白空间。例如，请查看此isotope截图...

enter image description here

有一个元素缺失。当然，在大多数情况下，这是你想要保持元素顺序的内容。在我的情况下，我不关心顺序，我只想填充所有的空格和间隙。因此，就像你在上面的草图中看到的那样，item-nr-3 应该向上移动以适应空缺（因为它会适合）。如果还有另一个相同大小的 item，它将适合在 item-nr-3 下面的间隙里。

这样可能吗？是否有一些 jQuery 插件可以做到这一点？或者你有其他的想法？

一些额外的信息: 我所说的“items”和“boxes”都设置为box-sizing:border-box，因此我不必担心填充或边距。

更新：这里是问题的实时示例：http://jsfiddle.net/r79u2/1/

- matt

你有任何 JSFiddle 吗？ - Royi Namir

@RoyiNamir 看看这个... http://jsfiddle.net/r79u2/1/ 这正是我正在处理的问题。在 min-width: 45em 媒体查询内，我希望我的第三、四项跳上来填充网格。 - matt

1

你尝试过使用CSS3列吗？在CSS-Tricks上有一篇不错的文章介绍它。 - Mottie

@Mottie谢谢你的提示。听起来不错，但是我发的Fiddle能实现吗？问题是我需要一个在我已经使用的“框架”中可行的解决方案。 - matt

@Mottie 此外，如果容器的宽度与我在我的 fiddle 中设置的不同，这是否可行？ - matt

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Drew Dahlman · Accepted Answer

编辑

自发布此文后，我已添加了“间距”和回调函数的支持。

我编写了一个插件，可以做到您想要的效果。虽然不是完全一样，但您可以用它指引正确的方向...

插件 - https://github.com/DrewDahlman/Mason

有关理论的博客文章 - http://www.drewdahlman.com/meusLabs/?p=218

这个想法是这样的 - 我们知道有很多元素 - Mason的工作是用这些元素填充定义的空间，这些元素被左浮动 - 这会导致“间隙”，因此我们需要检测这些间隙并以某种方式填充它们。为了做到这一点，我们可以复制一个已经存在的元素，或者 - 我们可以有一个“填充器”元素的桶，我们可以用它来填充那个空间。

如果您想要一个具有一定控制力的随机大小网格，那么这个插件就能完成任务。我做了这个fiddle - http://jsfiddle.net/bdGVr/

您会注意到每次运行或调整窗口大小时，网格都会重新绘制。这将导致任何间隙都被填充成红色块。

通过调整mason.js的选项，您可以调整相对于容器的尺寸比率，以及可能的大小组合。

例如 - 比率为1.8，大小为1x3意味着1.8 x 1 = 高度，1.8 x 3 = 宽度。