使用masonryjs加载页面上的动画

Question

我无法弄清楚如何在第一页加载时初始化砌体的初始fadein动画，就像原始插件的页面一样：

http://masonry.desandro.com/

有任何帮助建议吗？

Answer 1

我使用了imagesLoaded进度延迟API和Masonry的附加方法。

$('#load-images').click( function() {
  var $items = getItems();
  // hide by default
  $items.hide();
  // append to container
  $container.append( $items );
  $items.imagesLoaded().progress( function( imgLoad, image ) {
    // get item
    // image is imagesLoaded class, not <img>, <img> is image.img
    var $item = $( image.img ).parents('.item');
    // un-hide item
    $item.show();
    // masonry does its thing
    $container.masonry( 'appended', $item );
  });
});

首先隐藏项目，然后将其附加到容器中。每个项目加载后，它都会被隐藏，然后由Masonry显示。

来源：http://codepen.io/desandro/pen/iHevA