2013-08-23 2 views
3

컨테이너를 사용하여 그래프보기를 만들려고합니다. 따라서 : [A 's -> B 's -> C 's]면, As의 내부에있는 Bs의 내부에 객체 c가 표시됩니다. 이 같은벽돌 개체 중첩

뭔가 : enter image description here

은 내가 벽돌보기이에 적합하지만 중첩 잘 동작하지 않습니다 수 있다고 생각합니다. 내가 지금까지 무엇을의

바이올린은 : 그들은 alining되지 않는 이유 http://jsfiddle.net/paulocoelho/5SxQ5/4/

나는하지 않습니다. 또한 CSS의 열 개수 및 열 간격을 사용하여 시도했지만 렌더링이 극히 버그가 있음을 발견했습니다. 내가해야

바이올린 코드 사촌 ...

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

답변

2

이를 생각해 보자.

itemSelector 속성을 제거하십시오. Masonry은 자식 항목뿐만 아니라 해당 선택 자와 일치하는 모든 자손을 사용합니다. 따라서 첫 번째 컨테이너 (motherContainer)의 경우 Masonry은 ALL .wrapper 요소의 레이아웃을 시도하고 중첩 된 .container 요소의 요소를 포함합니다.

그리고 을 .container 요소의 되 돌린 배열에 호출하십시오. 가장 안쪽에서 가장 바깥 쪽까지, 메이슨은 부모 컨테이너에 간격을 두는 자식 요소의 높이를 변경하기 때문에.

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

그냥 사용해보십시오. 다음은 jsfiddle입니다. C 요소도 추가했습니다.