Masonry can't load when appending elements dynamically to its container – PHP, JS

See more:

Javascript

CSS

HTML

PHP

/* I am designing a site that stacking of divisions is similar to Pinterest(I am using Masonry library for that). Masonry works fine when the element first load but when it starts appending, masonry doesn’t work anymore.. please help me! Here’s my code..
*/

$(document).ready(function(){
                    var _onscrollprog = true;
                    var progposoffset = $('#progressmessage').offset();
                    var progpos = 0;
                    
                    $( window ).load( function()
                    {    
                        loaditempost();
                    });
                    function _(el){
                        return document.getElementById(el);
                    }
                    var itemloadcount = 0;
                    function loaditempost(){
                        var ajax;
                        _onscrollprog =false;
                        
                        if (window.XMLHttpRequest) {
                            ajax = new XMLHttpRequest();
                        }
                        else
                        {
                            ajax = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        
                        if(ajax){
                            ajax.addEventListener("load", completeHandler, false);
                            ajax.addEventListener("error", errorHandler, false);
                            ajax.open("POST", "include/loaditems.php?count=" + itemloadcount);
                            ajax.send();
                        }
                        else{
                            _("progressmessage").innerHTML = "<span class='icon-cross'></span> Error on requesting XMLHttp";
                        }
                    }
                    
                    function completeHandler(event){
                        var $grid = $('.grid');
                        $grid.append(event.target.responseText);
                        
                        $grid = $('.grid').masonry({
                            columnWidth: 315,
                            itemSelector: '.grid-item'
                        });
                        
                        itemloadcount += 8;
                        _onscrollprog = true;
                    }
                    
                    function errorHandler(event){
                        _("progressmessage").innerHTML = "<span class='icon-cross'></span> Oppss! Error Occured! :(";
                        _onscrollprog = true;
                    }
                    
                    $(window).scroll(function(){
                        var pos = $(window).scrollTop();
                        progpos = progposoffset.top;
                        if (pos > progpos){
                            if (_onscrollprog) {
                                loaditempost();
                            }
                        }
                    });
                });