嵌套砌体物体

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

像这样的东西：

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

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

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

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

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

Answer 1

考虑一下。

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

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

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

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