嵌套砖石对象 [英] Nesting Masonry objects

问题描述

我试图使用容器创建图形视图。所以如果：[A's - > B's - > C's]视图将显示在As内部的Bs中的对象c。

I am trying to create a graph view using containers. So if: [A's -> B's -> C's] the view would show an objects c inside of Bs which are inside of As.

这样的：

Something like this:

我认为一个砌体视图是完美的，但我不能得到嵌套工作正确。

I think a masonry view is perfect for this but I can't get the nesting to work right.

到目前为止我还有一个小东西： http://jsfiddle.net/paulocoelho/5SxQ5/4/

Fiddle of what I have so far: http://jsfiddle.net/paulocoelho/5SxQ5/4/

我不明白为什么他们不是alining。我也尝试使用CSS的列数和列间隙，但发现渲染是非常bug。

I don't get why they are not alining. I also tried using CSS's column-count and column-gap but found the rendering to be extremely buggy.

小提琴代码coz我必须...

Fiddle code coz I must...

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

推荐答案

请考虑这一点。

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

Remove itemSelector property - if the one is set Masonry will use not only children items but all descendants that match that selector. So, for the first container (motherContainer) Masonry would try to layout ALL .wrapper elements, include those in nested .container elements.

Masonry 在 .container 元素的还原数组上。从最内层到最外层，因为Masonry会更改子元素的高度，在父容器中留下空隙。

And the key point - call Masonry on the reverted array of .container elements. From the innermost to the outermost, because Masonry changes children elements' height leaving gaps in the parent container.

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

试试看。以下是 jsfiddle 。
我也添加了C元素。

Just give it a try. Here is a jsfiddle. I also added C elements.

这篇关于嵌套砖石对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！