Question

我正在使用打包并且看起来很好 - 我真正想要做的是在负载上进行转换。

当我使用内置功能添加（追加）项目时，它有一个很好的过渡，但我试图在加载的第一批瓷砖上得到它，而不必添加这些项目。

这是我运行的代码

function runPackery() {

      $container = $('#main').packery({
        itemSelector: '.module',
        columnWidth: 320,
        //disable resize
        isResizeBound: false,
        transitionDuration:"0.8s"
      });

      var pckry = $container.data('packery');

      var gutter = pckry.options.gutter || 0;
      var columnWidth = pckry.options.columnWidth + gutter;

      function onResize() {
        var outsideSize = getSize( $container.parent()[0] ).innerWidth;
        var cols = Math.floor( outsideSize / ( columnWidth ) );
        // set container width to columns
        $container.width( cols * columnWidth - gutter )
        // manually trigger layout
        $container.packery();
      }

      // debounce resize event
      var resizeTimeout;
      $( window ).on( 'resize', function() {
        if ( resizeTimeout ) {
          clearTimeout( resizeTimeout );
        }
        resizeTimeout = setTimeout( onResize, 100 );
      })

      // initial trigger 
      onResize();   
}

该代码使用jQuery在文档上运行。

我没有在文档中看到任何选项来启用此功能 - 我认为这将是一个选项

任何人都可以帮忙吗？

欢呼声

Answer 1

最好的方法是初始化包装，然后只需添加第一个项目 - 效果很好

初始加载时的包装转换

1 个答案: