Question

我正在使用Desandro在wordpress存档页面上的砌体，以及Malinky的“Ajax Pagination and Infinite Scroll”插件，以创建一个3列砌体布局，在更多帖子加载后将帖子附加到砌体网格。但是，我不喜欢通过从砖石默认的顶部/左侧角落滑动它们来附加新帖子的视觉效果。相反，我希望它们在底部一个接一个地淡入。

我尝试将transitionDuration设置为0，以便让新帖子从正确的位置开始，但是从那个开始，我没有成功地让它们在加载后连续淡入。

到目前为止，我只能使用它：

(function($) {
  $(window).load(function(){
    var $container = $('.grid');
    $container.imagesLoaded( function() {
      $container.masonry({
        itemSelector: '.grid-item',
        transitionDuration: '0s'
      });               
    });
  });   
})( jQuery );

注意：在无限滚动插件中我正在使用此回调：

$('.grid').imagesLoaded( function() {
  $('.grid').masonry('reloadItems').masonry();
});

Answer 1

好的，所以我想出来了，如果其他人遇到这个问题。您需要为初始砌体函数和ajax插件回调函数将transitionDuration设置为“0”。

(function($) {
    $(window).load(function(){
        //masonry
        var $container = $('.grid');
        $container.imagesLoaded( function() {
            $container.masonry({
                itemSelector: '.grid-item',
                transitionDuration: 0
            });             
        });
    }); 

})( jQuery );

用于ajax回调

var $container = $('.grid');
$container.imagesLoaded( function() {
    $container.masonry('reloadItems').masonry({
        itemSelector: '.grid-item',
        transitionDuration: 0
    }); 
});

然后在你的css文件中将.grid-item元素的初始不透明度设置为0，然后通过jQuery将每个元素设置为淡入淡出为1，这样

jQuery(document).ready(function( $ ) {
    $('.grid-item').each(function(fadeInDiv){
        $(this).delay(fadeInDiv * 50).fadeTo(250, 1);
   });
});

以及ajax回调

$('.grid-item').each(function(fadeInDiv){
    $(this).delay(fadeInDiv * 50).fadeTo(250, 1);
});`

Masonry：如何在添加新项目时将默认动画更改为淡入淡出？

1 个答案: