將AJAX項目添加到無限滾動砌體

我搜索了四周，看着一堆不同的邏輯，並認爲我非常接近，但根本無法讓我的無限滾動腳本將我的數據追加到砌體。我同時把數據的AJAX文件，這就是滾動時拉數據文件內的主線：將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（ '內容'）附加（數據）;」。因爲這只是將數據放入我的主索引文件中的砌體功能內部的div中。

我試過的東西，如

$ this.find（ '內容 '）追加（數據）.masonry（' 刷新'）。

但根本無法讓它正常工作並讓它追加數據。

其餘的代碼工作，滾動工作正常，拉數據，只是不會追加到砌體。

任何提示，我覺得我失去了一些非常小的東西。

在此先感謝！

來源

2013-07-22 JNB

$moreBlocks.imagesLoaded(function(){ 

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

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

});

看起來是這樣做的。謝謝你的幫助德魯，感謝你一噸！

來源

2013-07-28 19:37:03 JNB

我對砌體（新版本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

來源

2013-07-25 18:46:34

非常好。謝謝你，我非常感謝。我遇到的唯一非常小的問題是無限滾動正在工作等，但我也使用了imagesLoaded插件來幫助處理重疊。通過AJAX加載的前30個項目，砌體顯示它們重疊，然後我滾動它很好，並且該功能在第一組之後觸發並且圖像不重疊。我似乎無法得到第一組項目不重疊，並有圖像加載func火和工作與這些項目。有什麼想法嗎？我嘗試了包裝jQuery（'＃容器'）。append（$ moreBlocks）;瓦特imagesLoaded（函數（）{ – JNB

$（函數（）{ \t \t \t 變種\t $容器= $（ '＃容器'）; \t \t \t $ \t container.imagesLoaded（函數（）{ \t \t $ container.masonry（{ \t \t \t itemSelector： '的.index-機頂盒'， \t \t \t columnWidth時：25 \t \t}）; \t \t}）; \t \t \t \t $（'＃content'）。scrollPagination（{ ...}}; ）}; – JNB

我發現如果您在img標籤中設置圖像大小，就像那樣，那麼您不需要使用imagesLoaded。這對你有可能嗎？ –

將AJAX項目添加到無限滾動砌體

回答

相關問題