Question

我尝试使用Isotope设置Ajax后加载。但是我在帖子中加载并在网格中显示它们时遇到了问题。已加载的网格项目可以添加到网格顶部，也可以不由Isotope定位。

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

<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;   
    });

});

我想我会尝试将（＆＃39; .grid-item＆＃39;）数据转换为变量，所以我可以在$（网格）下调用它，但我无法将其转换为工作。目前已添加帖子，但Isotope未对其进行定位。

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

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

Answer 1

最后我发现了问题。我应该从头开始使用 insert ，而不是追加和 reloadItems 。需要更改2行：

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

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

1 个答案: