숨겨진 div에 벽돌을 적용하는 방법?

Question

격자 레이아웃에 jquery Masonry을 사용하고 있습니다.

<div id="container"> 
    <div class="item">[...]</div> 
    <div class="item">[...]</div> 
    <div class="item">[...]</div> 
    <div class="item">[...]</div> 
    <div class="item"> 
     <select id="selectorColors"> 
      <option value="red">Red</option> 
      <option value="yellow">Yellow</option> 
      <option value="blue">Blue</option> 
     </select> 
    </div> 
    <div class="item"> 
     <div class="colors"></div> 
    </div> 
    <div class="item">[...]</div> 
</div> 
<script type="text/javascript"> 
    $('#container').masonry({ 
     itemSelector: '.item', 
     columnWidth: 90 
    }); 
</script> 

제 경우에는 옵션을 선택할 때만 나타나는 숨겨진 div가 있습니다. 벽돌은 보이는 div에 대해서만 잘 작동하지만 숨겨진 div에 대해서는 작동하지 않습니다. 옵션을 선택하면 div가 나타나지만 겹쳐집니다.

$('select').change(function(){ 
    if($('select').val() == '') { 
     $('div.colors').hide(); 
    } else { 
     $('div.colors').show();   
    } 
}); 

나는 다음과 같은 reload 방법을 사용하여 항목을 다시로드하려고 :

$('div.colors').show().masonry('reload'); 

을하지만 작동하지 않습니다. 나는 무엇을 잘못 했는가?

Answer 1

div를 숨기는 대신 visibility:hidden을 사용해보십시오. 이 방법으로 벽돌은 재 장전시이 div를 고려해야합니다.

Answer 2

나는 이것이 꽤 오래되었다는 것을 알고 있지만, 처음에는 display : none 세트를 가지고있는 div에서 masonry를로드하고 싶었던 비슷한 문제가있었습니다. div를 표시 할 때 벽돌이 올바르게 표시되지 않았습니다. 성공적으로 벽돌을 다시로드했습니다.

$('#masonry').masonry(); 

모든 타일이 올바르게 정렬되었습니다.