AJAX 항목을 무한 스크롤로 석조에 추가하십시오.

Question

저는 여러 논리를 검색하여 매우 가깝다고 생각했지만 단순히 내 무한 스크롤 스크립트로 내 데이터를 석조물에 추가 할 수는 없습니다. 나는 동안 데이터를 당겨하는 AJAX 파일을 가지고 있고,이 스크롤 할 때 데이터를 가져옵니다 파일의 내부 메인 라인이다 :

 function getData() { 

      // Post data to ajax.php 
      $.post('ajax.php', { 

       action  : 'scrollpagination', 
       number  : $settings.nop, 
       offset  : offset, 

      }, function(data) { 

       // Change loading bar content (it may have been altered) 
       $this.find('#spinner').html($initmessage); 

       // If there is no data returned, there are no more posts to be shown. Show error 
       if(data == "") { 
        $this.find('#spinner').hide(); 
       } 
       else { 



        // Offset increases 
        offset = offset+$settings.nop; 

        // Append the data to the content div 
        $this.find('.content').append(data); 


        // No longer busy! 
        busy = false; 
       } 

      }); 

     } 

나는 줄 "$ this.find (에 편집을 시도했습니다 '.content'). append (데이터); " 이것은 단순히 데이터를 가져 와서 주 색인 파일의 내 벽돌 기능 안에있는 콘텐츠 div에 넣는 것입니다. 같은

$ this.find ('. 내용')와 같은

내가 해봤 일 (데이터) .masonry ('재 장전')를 추가합니다.;

하지만 제대로 작동하고 데이터를 추가 할 수 없습니다.

코드의 나머지 부분이 작동하고 스크롤이 제대로 작동하고 데이터를 가져 오지만 벽돌에 추가되지 않습니다.

팁, 나는 아주 사소한 것을 놓치고있는 것처럼 느껴집니다.

미리 감사드립니다.

Answer 1

$moreBlocks.imagesLoaded(function(){ 

    $moreBlocks.animate({ opacity: 1 }); 

    jQuery('#container').masonry('appended', $moreBlocks); 

}); 

보인다. 도와 줘서 고마워 Drew, 고맙습니다.

Answer 2

Masonry (새로운 버전 3)와 동일한 문제가있었습니다. 열쇠는 AJAX/GET/POST가 반환하는 .filter()입니다. There is a bug with Masonry that you can read here, 해결 방법은 .filter()를 사용하는 것입니다.

// Make jQuery object from HTML string 
    var $moreBlocks = jQuery(data).filter('div.block'); 

    // Append new blocks to container 
    jQuery('#container').append($moreBlocks); 

    // Have Masonry position new blocks 
    jQuery('#container').masonry('appended', $moreBlocks);   

나는 여기에 도움이되는 작은 데모를 만들어이 그것을처럼 http://labs.funkhausdesign.com/examples/masonry/appended.html