追加

2015-10-26 16 views
1

后同位素项目重定位问题我试图设置与同位素加载Ajax后。但是我无法在帖子中加载并在网格中显示它们。加载的网格项目要么添加到网格的顶部,要么未被同位素定位。追加

更新!我刚刚注意到,双击网格项目的位置正确。但为什么不在第一次点击?

<div id="filters" class="button-group"></div> 
<div class="grid"> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
</div> 

同位素设置

// init Isotope 
var $grid = $('.grid').isotope({ 
    sortBy : 'random', 
itemSelector: '.grid-item', 
masonry: { 
    columnWidth: 200 
    }, 
sortAscending: { 
    name: true, 
    number: false, 
    date: false, 
}, 
getSortData: { 
    name: '.name', 
    date: '.date', 
    number : '.number', 
    category: '[data-category]', 
} 
}); 

负载posts.js

jQuery(document).ready(function($) { 

    var pageNum = parseInt(rvidee_alp.startPage) + 1; // The number of the next page to load (/page/x/).  
    var max = parseInt(rvidee_alp.maxPages); // The maximum number of pages the current query can return. 
    var nextLink = rvidee_alp.nextLink; // The link of the next page of posts. 
    var grid = $('.grid'); // Posts container 

    if(pageNum <= max) { 
     $('.posts') // Insert the "More Posts" link. 
      .append('<div class="col"><a id="load-posts" href="#0">Load more</a></div>'); 
     $('.navigation').remove(); // Remove the traditional navigation. 
    } 

    $(document).on('click', '#load-posts', function(){ 

     if(pageNum <= max) { // Are there more posts to load?  
      $(this).text('Loading posts...'); 
      $.get(nextLink, function(data){ 

       pageNum++; 
       nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);   
       $(data).find('.grid-item').appendTo(grid); 

        if(pageNum <= max) { 
         $('#load-posts').text('Load more'); 
        } else { 
         $('#load-posts').text('No more to load.'); 
        } 
      });       
     } else { 
      $('#load-posts').append('.'); 
     } 
     $('.grid').isotope('reloadItems').isotope(); 
     return false; 
    }); 

}); 

我想我会尝试让( '.grid项目')的数据到变量,所以我可以在$(网格)下调用它,但我无法让它工作。目前帖子被添加,但Isotope没有定位它们。

只要让我知道,如果你需要看到在functions.php中的设置。

更新!我刚刚注意到双击网格项目的位置正确。但为什么不在第一次点击?

回答

1

最后我发现了这个问题。代替追加reloadItems,我应该使用插入从开始。需要更改2行:

var newItems = $(data).find('.grid-item'); 
$('.grid').isotope('insert', newItems);