masonry not animating anymore

Question

I am facing problem with masonry, it was working perfect, now it random stop animating. i am so much confuse; i try everything but it is not animating pics any more.. is there anyone with solution?

I uploaded a simple webpage with masonry, Please take a look to find error.

http://www.bhinderblink.com/masonryDemo.aspx

http://www.bhinderblink.com (this main page working with DB, repeater and jquery to load pictures)

Script

<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>

<script type="text/javascript">

    $(function () {
        $('#container').masonry({
            // options
            itemSelector: '.box',
            columnWidth: 240,
            isAnimated: true
        })
    });


</script>

Body

<div id="container">
    <div class="box">
        <div id="imageDiv1">
            LoadImage...1<br />
            <asp:Image runat="server" ID="img1"  ImageUrl="~/pic/jas/pic10.jpg" />
        </div>
    </div>
    <div class="box">
        <div id="imageDiv2">
            LoadImage...2<br />
            <asp:Image runat="server" ID="Image2" ImageUrl="~/pic/jas/pic11.jpg" />
        </div>
    </div>
    <div class="box">
        <div id="imageDiv3">
            LoadImage...3<br />
            <asp:Image runat="server" ID="Image1" ImageUrl="~/pic/jas/pic12.jpg" />
        </div>
    </div>
    <div class="box">
        <div id="imageDiv4">
            LoadImage...4<br />
            <asp:Image runat="server" ID="Image3" ImageUrl="~/pic/jas/pic13.jpg" />
        </div>
    </div>
    <div class="box">
        <div id="imageDiv5">
            LoadImage...5<br />
            <asp:Image runat="server" ID="Image4" ImageUrl="~/pic/jas/pic14.jpg" />
        </div>
    </div>
    <div class="box">
        <div id="imageDiv6">
            LoadImage...6<br />
            <asp:Image runat="server" ID="Image5" ImageUrl="~/pic/jas/pic15.jpg" />
        </div>
    </div>
</div>

Main Page body

<form id="form1" runat="server">
<div id="topBanner">
</div>
<asp:Repeater ID="rptCustomers" runat="server">
    <HeaderTemplate>
    </HeaderTemplate>
    <ItemTemplate>
        <div id="container">
            <div class="box">                   
                <asp:Image ID="zzz" runat="server" ImageUrl='<%# "~/pic/jas/" + Eval("pic_name") + ".jpg" %>' />
            </div>
        </div>
    </ItemTemplate>
    <FooterTemplate>
    </FooterTemplate>
</asp:Repeater>
<div id="imageDiv">
    LoadImage...
</div>
<img id="loader" alt="" src="loading.gif" style="display: none" />
</form>

main page script

<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />

<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>

<%--masonry--%>
<script type="text/javascript">

    $(function () {
        $('#container').masonry({
            // options
            itemSelector: '.box',
            columnWidth: 240,
            isAnimated: true
        });
    });


</script>
<%--Pagging--%>
<script type="text/javascript">
    var pageIndex = 1;
    var pageCount;
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {

            GetRecords();
        }
    });
    function GetRecords() {
        pageIndex++;
        if (pageIndex == 2 || pageIndex <= pageCount) {
            $("#loader").show();
            $.ajax({
                type: "POST",
                url: "/index.aspx/GetCustomers",
                data: '{pageIndex: ' + pageIndex + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert("failur");
                    alert(response.d);
                },
                error: function (response) {
                    alert("error");
                    alert(response.d);
                }
            });
        }
    }
    function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);

        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());

        var pic_infoVar = xml.find("pic_info");

        pic_infoVar.each(function () {
            var customer = $(this);
            $("#imageDiv").append("<img id='theImg' src='/pic/jas/" + customer.find("pic_name").text() + ".jpg" + "'/>");
        });
        $("#loader").hide();
    }

</script>

Answer 1

 $(document).ready(function () {
     $('.container').imagesLoaded(function () {
      var container = document.querySelector('.container');
      var msnry = new Masonry( container, {   
            // options
            colWidth:200,
            itemSelector: '.box',
            isFitWidth: true,
            isAnimated: true,
             animationOptions: {
            duration: 1000,
            easing: 'linear',
            queue: false
          },
        isInitLayout: false
      });

      msnry._isLayoutInited = true;
      msnry.layout();
    });
    });

Answer 2

Swap the order of the scripts

<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>

jQuery has to be loaded first for masonry to work:

<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>

Edit:

Your site seems to have masonry applied to every container class, which seems to be different then your demo page.

Demo page:

<div id="container">
    <div class="box">
        <div id="imageDiv1">
            LoadImage...1<br />
            <img id="img1" src="pic/jas/pic10.jpg" />
        </div>
    <div class="box">
        <div id="imageDiv2">
            LoadImage...2<br />
            <img id="Image2" src="pic/jas/pic11.jpg" />
        </div>
    </div>
</div>

Main page:

    <div id="container">
        <div class="box">
            <img id="rptCustomers_zzz_0" src="pic/jas/pic1.jpg" />
        </div>
    </div>
    <div id="container">
        <div class="box">
            <img id="rptCustomers_zzz_1" src="pic/jas/pic2.jpg" />
        </div>
    </div>

So add another container to contain the .containers or apply masonry to the body itself

 $(function () {
            $('body').masonry({
                // options
                itemSelector: '.box',
                columnWidth: 240,
                isAnimated: true
            });
        });