Question

我使用Isotope的Masonry布局以及Infinite Scroll，这是通过点击按钮启动的。

我想动画/转换每个.article项目到位，但是我只能通过CSS在初始布局上实现这一点。有没有办法创造这个步骤淡出＆＃39;每次运行无限滚动功能时效果如何？

非常感谢。

HTML

<div class="articles">
    <div class="article">
    </div>
</div>

JQUERY

$('.articles').imagesLoaded(function () {
    // vars
    // Define grid
    var $grid = $('.articles');

    $grid.isotope({
        itemSelector: '.article',
        layoutMode: 'masonry',
        transitionDuration: 0,
        stagger: 500,
        hiddenStyle: { opacity: 0 },
        visibleStyle: { opacity: 1 }
    });

    var iso = $grid.data('isotope');

    // Init infinite scroll
    $grid.infiniteScroll({
        path: '.pagination .next a',
        append: '.article',
        outlayer: iso,
        loadOnScroll: false,
        scrollThreshold: false,
        button: '.load-more-button',
        hideNav: '.pagination',
        status: '.load-status',
    });         
});

Answer 1

您似乎很亲近。

如果您希望每个新加载的物品以淡入淡入的方式，只需修改您的砌体初始化代码：

$grid.isotope({
   itemSelector: '.article',
   layoutMode: 'masonry',
   stagger: 500,
   visibleStyle: { transform: 'translateY(0)', opacity: 1 },
   hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }
});

您的无限滚动代码

var $container = $grid.infiniteScroll({
    path: '.pagination .next a',
    append: '.article',
    outlayer: iso,
    loadOnScroll: false,
    scrollThreshold: false,
    button: '.load-more-button',
    hideNav: '.pagination',
    status: '.load-status',
});

这是在按钮单击上加载更多内容的逻辑：

viewMoreButton.on( 'click', function() {
  // load next page
  $container.infiniteScroll('loadNextPage');
});

它应该可以工作。

通过砖石结构和按钮仔细查看infiniteScroll库的官方示例。

Step fade Infinite Scroll追加项目

1 个答案: