div의 높이 변화에 대한 레이아웃을 업데이트하십시오.

Question

하나씩 정렬 된 div가 여러 개 있고 벽돌 효과가있는 페이지가 있습니다.

벽돌이 잘 작동하고 있지만 유일한 문제는 div가 주석을 달 수있는 장소를 가지고 있으며 주석을 작성할 때마다 div의 높이가 증가하지만 masonary dosent가 div를 다시 정렬한다는 것입니다.

사업부는 아약스에 의해 다시로드가

<script> 
    $(document).ready(function() { 
     var $container = $('#REATinsidEpoASttt78'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
       itemSelector : '.realFLOAtingPOSTSA', 
       columnWidth : 350 
      }); 
     }); 
    }); 
    </script> 

이

이

function formsubmitionbyajax(obj){ 
    var id=$(obj).attr("id"); 
    var currentform = $(obj); 
    $('#COMMlo'+id).show(); 
    $.ajax({ type: 'post', 
     url: 'home_formhandler1.php', 
     data: currentform.serialize(), 
     success: function(){ 
      $("#mainDIV"+id).load('home.php #mainDIV'+id); 
     } 
    }); 
    return false; 
} 

내 HTML을

<div id="REATinsidEpoASttt78"> 
    <div class="realFLOAtingPOSTSA"> 
    <div id="mainDIVffrmMN<?=$THE_DTAinar['id']?>"> 
     something from database.... 
    </div> 
    </div> 
</div> 

처럼 보이는 다시로드의 div 이제 벽돌을위한 수 중 하나하시기 바랍니다 모든 div의 높이에 변화가있을 때 div를 재정렬하는 방법을 알려주십시오. 레이아웃을 업데이트하십시오현재 내가 좋아 사용하고하는 것은

var container = document.querySelector('#REATinsidEpoASttt78'); 
var msnry = new Masonry(container, { 
    columnWidth: 350 
}); 
setTimeout(function() { msnry.layout(); }, 2000); 

이 작동되지만 2 초 더 좋은 같은 resize event를 사용하는

Answer 1

시도에 대한 스피 검색의 지연 aftera 사업부를 배치

var container = document.querySelector('#REATinsidEpoASttt78'); 
var msnry = new Masonry(container, { 
       columnWidth: 350 
      }); 
$('#REATinsidEpoASttt78').on('resize',function() { // use resize 
    msnry.layout(); 
});