嵌套砌体对象

【问题标题】：Nesting Masonry objects嵌套砌体对象
【发布时间】：2013-08-23 00:32:29
【问题描述】：

我正在尝试使用容器创建图形视图。因此，如果：[A's -> B's -> C's]，视图将显示 Bs 内部的对象 c，而 Bs 位于 As 内部。

类似这样的：

我认为砌体视图非常适合这种情况，但我无法让嵌套正常工作。

我不明白他们为什么不排队。我也尝试使用 CSS 的 column-count 和 column-gap，但发现渲染非常有问题。

小提琴代码因为我必须...

var $container = $('.container');
$container.masonry({
    /*columnWidth: 200,*/
    itemSelector: '.eWrapper'
});

【问题讨论】：

【解决方案1】：

考虑一下。

删除itemSelector 属性-如果设置了Masonry，则不仅会使用子项，还会使用与该选择器匹配的所有后代。因此，对于第一个容器 (motherContainer)，Masonry 将尝试布局所有 .wrapper 元素，包括嵌套的 .container 元素。

还有关键点——在.container 元素的还原数组上调用Masonry。从最里面到最外面，因为 Masonry 改变了子元素的高度，在父容器中留下了空隙。

var $container = $('.container');
$($container.get().reverse()).masonry({});

试一试。这是jsfiddle。我还添加了 C 元素。

【讨论】：