追加后同位素项目重新定位问题

Question

我正在尝试设置 Ajax post 加载同位素。但是我在加载 posts 并将它们显示在网格中时遇到问题。加载的网格项目要么被添加到网格的顶部，要么没有被同位素定位。

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

<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-item') 数据放入变量中，这样我就可以在 $(grid) 下调用它，但我无法让它工作。目前已添加 post，但 Isotope 未对它们进行定位。

如果您需要查看 functions.php 中的设置，请告诉我。

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

Answer 1

终于找到问题了。我应该从一开始就使用 append 和 reloadItems，而不是 insert。需要更改 2 行：

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

追加后同位素项目重新定位问题

Isotope items reposition issue after append

wordpress

jquery

jquery-isotope