將元素添加到砌體

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();以激活新項目。