因为解释我的问题的所有其他方式将会变得复杂，我画了一个简单的图像来显示我的意思。
注意：这是一个流畅的网页设计。
所以我的dom命令是1,2,3。但是，当我在某个媒体查询中折叠我的布局时，我想动态切换dom命令或定位元素的方式不同。就像你在我的样品中看到的。
我知道有像jQuery Masonry或jQuery Isotope这样的东西，但是这两个插件都没有填满网格的所有空格。例如。看看这个同位素截图…
缺少一个元素当然在大多数情况下，这就是你想要保持元素的顺序。在我的情况下，我不在乎订单，我只想填满所有的空格和空白。所以就像你看到上面的草图，项目nr-3应该向上移动以适应空隙(因为它将适合)。如果另外一个项目的大小相同，那么它将适合item-nr-3下面的缺口。
这是可能吗？有没有一些jQuery插件呢？还是有其他idaes？
一些额外的信息：
我正在谈论的项目和框都设置为Box-sizing：border-Box，所以我不必担心paddings或margin。
更新：
这是一个现场示例的问题：http://jsfiddle.net/r79u2/1/
解决方法
EDIT
Since the time of posting this I have added support of “Gutters” and
callbacks
我写了一个插件，做你想要的。不是很好，但你可以用它来指向正确的方向…
插件 – https://github.com/DrewDahlman/Mason
关于理论的博客文章 – http://www.drewdahlman.com/meusLabs/?p=218
这个想法是这样的 –
我们知道我们有许多要素 – 梅森的工作就是用这些浮动的元素来填充一个定义的空间 – 这导致了“差距”，所以我们需要检测这些差距，并以某种方式填补它们。为了做到这一点，我们可以复制一个已经存在的元素，或者 – 我们可以有一桶“填充”元素，我们可以填补这个空间。
OP – 如果你正在寻找一个随机大小的网格，有一些控制，这将做的工作。我做了这个小提琴 – http://jsfiddle.net/bdGVr/
你会注意到每次运行它或调整网格重新绘制的窗口大小。这将导致任何间隙填满红色块。
使用mason.js的选项，您可以调整相对于容器的大小的比例以及可能的大小组合。
例如，1.8的比例和1×3的大小意味着1.8×1 =高度，1.8×3 =宽度。
