嵌套砌体物体

Question

我正在尝试使用容器创建图表视图。所以如果：[A的 - ＆gt; B's - ＆gt; C's]视图将显示B内部的对象c，它们位于As。

中

这样的事情：

我认为砌体视图是完美的，但我不能让嵌套工作正常。

到目前为止我所掌握的事情：http://jsfiddle.net/paulocoelho/5SxQ5/4/

我不明白为什么他们不会抱怨。我也尝试过使用CSS的列数和列间隙，但发现渲染非常错误。

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

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

Answer 1

考虑一下。

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

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

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

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