jquery - Wordpress 中的 jQuery Masonry IsAnimatedFromBottom

Question

我正在制作一个使用 jquery-masonry 的 wordpress 主题，但是对于我的生活，我无法弄清楚如何将 append 方法与 isAnimatedFromBottom 一起使用。下面是我目前正在使用的代码。我试图让它与喷气背包无限滚动一起工作。

非常感谢任何见解或帮助。

jQuery(document).ready(function($) {
var $container = $('#content');

$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.post',
        isAnimated: true,
        animationOptions: {
            duration: 300,
            easing: 'linear',
            queue: false
        }
    });
});

});

Answer 1

如果您希望新元素出现在底部而不是出现在左上角然后飞入位置。您应该将 isAnimatedFromBottom 标志用于附加方法。例如

var isAnimatedFromBottom = true;
.masonry( 'appended', $content, isAnimatedFromBottom );

下面的代码是无限滚动的示例..

$container.infinitescroll({
  navSelector  : '#page-nav',    // selector for the paged navigation 
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'No more pages to load.',
      img: 'http://i.imgur.com/6RMhx.gif'
    }
  },
  // trigger Masonry as a callback
  function( newElements ) {
    var $newElems = $( newElements );
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
      $container.masonry( 'appended', $newElems, true ); 
    });
  }
);