javascript - 使用 masonryjs 加载页面时的动画

Question

我无法弄清楚如何在第一个页面加载时完全像原始插件页面一样初始化 masonry 时获得初始淡入动画:

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