嵌套砌體對象

Question

我想創建一個使用容器的圖形視圖。因此，如果：[A's - > B's - > C's]該視圖將顯示位於As內部的Bs中的對象c。

事情是這樣的：

我覺得磚石看法是完美的，但我不能讓嵌套的工作權利。

搗鼓什麼，我到目前爲止有：http://jsfiddle.net/paulocoelho/5SxQ5/4/

我不知道爲什麼他們沒有alining。我也嘗試過使用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元素。