벽돌 레이아웃이 필터링 될 때 공간을 채우지 못함

Question

클릭시 필터링되는 벽돌 레이아웃을 만들었습니다.

몇 가지 이유로 버튼 중 일부를 선택하면 벽돌 레이아웃이 왼쪽으로 떠서 컨테이너를 채우지 않고 모든 항목을 서로 위에 쌓습니다.

$grid.isotope({ layoutMode: 'masonry' }) 

벽돌이 layoutMode가 내장되어하지 않는 것 나는이 프로젝트에 동위 원소를 사용할 수 없습니다 : 나는 동위 원소에 그것은 괜찮이다, 이런 일이 왜 모르겠어요. http://codepen.io/H0BB5/pen/ORVBzm

레이아웃 '보기'와 '축하'가 아니라 '감사합니다'를위한 최적입니다 : 내가 잘못 가고 어디

는 잘 모르겠어요, 여기 codepen이다.

편집 : 나는 처음 두 그리드 항목의 html로에서이 '축하'클래스를 가지고 있기 때문에 '축하'은 공간을 채우는의 원인 인 것으로 나타났습니다. 이것은 어떻게 든 레이아웃을 수직이 아닌 가로로 채우도록해야합니다. 아직 해결 방법을 찾지 못했습니다.

Answer 1

나는 문제를 파악했다. 다른 사람이 같은 문제가있는 경우 설명서를 자세히 읽으면 해결책을 찾았습니다. http://codepen.io/H0BB5/pen/ORVBzm

:

<div class="grid"> 
    <!-- .grid-sizer empty element, only used for element sizing --> 
    <div class="grid-sizer"></div> 
    <div class="grid-item"></div> 
    <div class="grid-item grid-item--width2"></div> 
    ... 
</div> 

/* fluid 5 columns */ 
.grid-sizer, 
.grid-item { width: 20%; } 
/* 2 columns wide */ 
.grid-item--width2 { width: 40%; } 
// use outer width of grid-sizer for columnWidth 
columnWidth: '.grid-sizer', 
itemSelector: '.grid-item', 
percentPosition: true 

이제 펜을 작업