16

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

由于解释我的问题的所有其他方式都会变得复杂，所以我画了一个简单的图像来说明我的意思。

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

在此处输入图像描述

所以我的dom-order是1,2,3。但是，当在某个范围内折叠我的布局时，media-query我想动态切换 dom 顺序或以不同方式定位元素。就像您在我的示例中看到的那样。

我知道有jQuery Masonry或jQuery Isotope之类的东西，但是这两个插件都不能填充网格的所有空白区域。例如，看看这个同位素截图……</p>

在此处输入图像描述

缺少一个元素。当然，在大多数情况下，这就是您想要保持元素顺序的原因。就我而言，我不关心订单，我只想填补所有空间和空白。所以就像你在上面看到的我的草图一样，item-nr-3应该向上移动以适应空白的间隙（因为它会适合）。如果有另一个item相同尺寸的，它会适合下面的间隙item-nr-3。

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

一些附加信息：items和 我正在谈论 的框都设置为box-sizing:border-box所以我不必担心填充或边距。

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

4

1 回答 1

14

编辑

自发布此消息以来，我添加了对“Gutters”和回调的支持

我写了一个插件，可以满足您的需求。不完全是，但你可以用它来为你指明正确的方向......

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

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

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

OP - 如果你正在寻找一个带有一些控制的随机大小的网格，这将完成工作。我做了这个小提琴 - http://jsfiddle.net/bdGVr/

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

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

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

于 2013-01-07T17:37:34.847 回答