jQuery:像砌体这样的插件可以克服dom-order和3个项目大小
mat*_*att 16 jquery media-queries jquery-masonry responsive-design
这可能很难解释.是否有类似jQuery砌体的类似插件能够检测预定义网格中的空间并移动和定位适合此空间的元素？
由于所有其他解释我的问题的方法都会变得复杂,我画了一个简单的图像来表明我的意思.
注意:这是一个流畅的响应式网页设计.
所以我的dom-order是1,2,3.然而,当我在一定范围内折叠我的布局时,media-query我想动态地切换dom顺序或以不同方式定位元素.就像你在我的样本中看到的一样.
我知道有像jQuery Masonry或jQuery Isotope这样的东西,但这两个插件都没有填满网格的所有空白区域.看看这个同位素截图...
缺少一个元素.当然,在大多数情况下,这是您希望保持元素顺序的内容.在我的情况下,我不关心订单,我只想填补所有空间和空白.因此,就像你在上面看到我的草图一样,item-nr-3应该向上移动以适应空隙(因为它适合).如果有另一个item相同的尺寸,它将适合下面的间隙item-nr-3.
这有可能吗？是否有一些jQuery插件可以做到这一点？或者你还有其他的idaes？
一些额外的信息:items我正在谈论
的和盒子都设置为box-sizing:border-box所以我不必担心填充或边距.
更新: 以下是问题的实时示例:http://jsfiddle.net/r79u2/1/
Dre*_*man 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 =宽度.