我附加的项目越多，同位素布局变得越来越奇怪

问题描述

我在我的网站上有这个页面，在那里我以类似马赛克的结构显示一些帖子，底部有一个“加载更多”按钮，问题是，我按下那个按钮越多，布局就越奇怪，所有列应该水平对齐，这适用于初始帖子，但不适用于新帖子

这是“加载更多”按钮触发的功能的一部分：

Isotope.prototype._positionItem = function( item,x,y ) {
    item.goTo( x,y );
};          

var $grid = $('.grid').isotope({
    itemSelector: '.grid-item',percentPosition: true,layoutMode: 'masonry',masonry: {
        columnWidth: '.grid-sizer',horizontalOrder: true
    }
});

if (data.success === true) {

    mosaic.page++;

    $('html,body').animate({

        scrollTop: $('.grid').offset().top + $('.grid').height()

    },'slow');

    var fade = 0;

    $.each(data.data,function(key,post){

        var template = $('#post-item').html();
        Mustache.parse(template);
        var item = Mustache.render(template,post);
        $grid.append( item );
        $('.grid-new:hidden:last-child()').fadeIn(fade += 300);

    }); 

    setTimeout(function(){
        $grid.isotope('reloadItems').isotope();                 
    },500);

    if (data.data.length < 9)
        $('.load_more').hide();

} else {

    if (data.data[0]['no-more-posts'])
        $('.load_more').hide();
    else
        console.error(data.data);

} 

The layout should look like this,and in the start,it works perfectly

After pressing it a little,the page starts to look like this

编辑：看了一点之后，我注意到即使在我按下“加载更多”之前就已经有问题了，如果你看这张图片here，在一个元素的两倍之后顺序就搞砸了其他人的高度（灰色的），在它之后，“第一个”变成右边的，“最后一个”在左边，我相信这可能是我的问题的原因，这里是生成初始页面/网格的 WordPress 主题代码：

<section class="grid">

    <div class="grid-sizer"></div>

    //...

    <?php if ($posts->have_posts()) : while ($posts->have_posts()) : $posts->the_post(); ?>

        //...

        <article class="grid-item" >
            //my post structure here
        </article>

    <?php endwhile; ?>

</section>

//...

<?php if (!wp_is_mobile()): ?>
<script type="text/javascript">
    jQuery(document).ready(function($) {

        Isotope.prototype._positionItem = function( item,y ) {
            item.goTo( x,y );
        };

        var $grid = $('.grid').isotope({
            itemSelector: '.grid-item',masonry: {
                columnWidth: '.grid-sizer',horizontalOrder: true
            }
        });
    }); 
</script>
<?php endif; ?>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）