javascript - 嵌套砌体对象

Question

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

像这样的东西：在此处输入图像描述

我认为砖石视图非常适合这个，但我无法让嵌套正常工作。

到目前为止我所拥有的小提琴：http: //jsfiddle.net/paulocoelho/5SxQ5/4/

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

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

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

score 2 · Accepted Answer

考虑一下。

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

关键点 - 调用Masonry恢复的.container元素数组。从最里面到最外面，因为 Masonry 改变了子元素的高度，在父容器中留下了间隙。

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

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

1 回答 1