砖石不再动画了

我正面临砌筑问题，它工作得很完美，现在它随机停止动画。 我很困惑; 我尝试了一切，但它不再是动画照片..有没有人有解决方案？

我上传了一个带砖石的简单网页，请看看发现错误。

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

http://www.bhinderblink.com （此主页使用DB，转发器和jquery加载图片）

脚本

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

身体

 
 
 
 LoadImage...1
  
 
 
 
 LoadImage...2
  
 
 
 
 LoadImage...3
  
 
 
 
 LoadImage...4
  
 
 
 
 LoadImage...5
  
 
 
 
 LoadImage...6
  
 
  

主页面

 
 
 
     
 
 <asp:Image ID="zzz" runat="server" ImageUrl='' /> 
 
     
 LoadImage... 
   

主页脚本

      $(function () { $('#container').masonry({ // options itemSelector: '.box', columnWidth: 240, isAnimated: true }); });    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(""); }); $("#loader").hide(); }  

Answer 1

交换脚本的顺序

首先必须加载jQuery才能使砌体工作：

编辑：

您的网站似乎已将砌体应用于每个容器类，这似乎与您的演示页面不同。

演示页面：

 
 
 
 LoadImage...1
  
 
 
 LoadImage...2
  
 
  

主页：

因此，添加另一个容器以包含.containers或将masonry应用于主体本身

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

Answer 2

  $(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(); }); });