javascript - Nesting Masonry objects -


i trying create graph view using containers. if: [a's -> b's -> c's] view show objects c inside of bs inside of as.

something this: enter image description here

i think masonry view perfect can't nesting work right.

fiddle of have far: http://jsfiddle.net/paulocoelho/5sxq5/4/

i don't why not alining. tried using css's column-count , column-gap found rendering extremely buggy.

fiddle code coz must...

var $container = $('.container'); $container.masonry({     /*columnwidth: 200,*/     itemselector: '.ewrapper' }); 

consider this.

remove itemselector property - if 1 set masonry use not children items descendants match selector. so, first container (mothercontainer) masonry try layout .wrapper elements, include in nested .container elements.

and key point - call masonry on reverted array of .container elements. innermost outermost, because masonry changes children elements' height leaving gaps in parent container.

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

just give try. here jsfiddle. added c elements.