将元素添加到砌体

Question

我已经浏览了关于这个问题的各种问题，但似乎没有解决我的问题。

当第一次加载页面，我开始的前十个图像砌筑如下：

$('img').load(function(){ 
    var masonry = $('#gallery').masonry({ 
     itemSelector: '.item', 
}); 
}); 

接下来，当用户滚动到页面的底部，我叫一个ajax：

if ($(window).scrollTop() >= $(document).height() - $(window).height() + 5) { 
      request_pending = true; 
      $('#loading').show(); 
      $.ajax({ 
       url: '/timeline/getPhotosAPI', 
       type: 'POST', 
       data: { id:'<?=$id?>', offset: offset }, 
       success: function(html){ 
        if(html.length > 0){ 
         var response = JSON.parse(html); 
         $.each(response, function(i, item){ 
          $('#gallery').append(item); 
          var $html = $(item); 
          $('#gallery').find('.item').masonry('appended', $html, true); 
         }); 
         $('#loading').hide(); 
         offset = parseInt(offset) + 10; 
         request_pending = false; 
        }else{ 
         alert('fail'); 
        } 
       } 
      }); 
     } 

哪里响应是从我的PHP HTML延迟性肌肉酸痛的JSON字符串，看起来像：

array(0 => '<div class="items"><img src="xyz" /></div>"); 

上面的代码成功地将我的图像附加到我的#gallery容器中，但砌体不会读取我的“.item”类，并将相应的定位附加到我新添加的项目中。

任何想法？

Answer 1

似乎砌体不能使用html字符串。

这是我的代码工作：

<script> 
    var offset = 10; 
    var request_pending = false; 
    var container = document.querySelector('#gallery'); 
    var msnry = new Masonry(container, { 
     itemSelector: '.item', 
    }); 

    $(document).ready(function(){ 
      $(window).scroll(function() { 
      if (request_pending) { 
       return; 
      } 
      if ($(window).scrollTop() >= $(document).height() - $(window).height() + 5) { 
       request_pending = true; 
       $('#loading').show(); 
       $.ajax({ 
        url: '/timeline/getPhotosAPI', 
        type: 'POST', 
        data: { id:'<?=$id?>', offset: offset }, 
        success: function(pictures){ 
         if(pictures.length > 0){ 
          var response = JSON.parse(pictures); 
          var elems = []; 
          var fragment = document.createDocumentFragment(); 

          $.each(response, function(i, item){ 
           var img = document.createElement("img"); 
           $(img).attr("src", item['photo_file']); 
           var div = document.createElement("div"); 
           $(div).addClass("item"); 
           $(div).append(img); 
           fragment.appendChild(div); 
           elems.push(div); 
          }); 
          // append elements to container 
          container.appendChild(fragment); 
          // add and lay out newly appended elements 
          $('#gallery').imagesLoaded(function(){ 
           msnry.appended(elems); 
          }); 
          $('#loading').hide(); 
          offset = parseInt(offset) + 10; 
          request_pending = false; 
         }else{ 
          alert('fail'); 
         } 
        } 
       }); 
      } 
     }); 
    }); 
</script> 

所以我的PHP返回图像源而不是HTML字符串的JSON字符串。砌体只接受DOM元素。

注意：此处使用imageLoaded.js来防止图像堆叠。没有它，砌体拒绝正常工作。

Answer 2

它看起来像在砌体文件中，他们将物品附加到容器，然后通知砌体他们被追加。

var container = document.querySelector('#container'); 
var msnry = new Masonry(container); 
container.appendChild(elem); 
msnry.appended(elem); 
msnry.layout(); 

见Masonry : Methods

$.each(response, function(i, item){ 
    $('#gallery').append(item); 
    msnry.appedned(item); 
}); 

您需要的msnry变量设置为一个全球性的，或至少较高的水平，当你创建它。

添加所有内容后，我认为您需要致电msnry.layout();以激活新项目。