2017-01-30 4 views
1

JavaScript Packeryコンポーネントを探しています。現在の実装をGridStackからPackeryに切り替える必要があります。今私を止める一つのことは、Packeryのコンポーネント(パネル)の動的なサイズ変更の効果がないことです。今私はデモやドキュメントでこの機能を見つけることができません。Metafizzy Packeryコンポーネントのダイナミックリサイズ効果

Packeryでこの機能を実装/有効にする方法はありますか?

答えて

1

これは確かに行うことができます。セットアップあなたのモデルとして「応答レイアウト」を使用しますhttps://imagesloaded.desandro.com

フルjavascriptのコール:批判的https://packery.metafizzy.co/layout.html#responsive-layouts

を、あなたはまた、javascriptを後のイメージが完全にロードされるロードするためにMetafizzy自身imagesLoaded JSを使用する必要があります(packery imagesLoadedの内側)に次のようになります。それでも問題が解決されない場合

<script type='text/javascript'> 
    $('.grid').imagesLoaded(function(){ 
     $('.grid').packery({ 
      itemSelector:'.grid-item', 
      percentPosition:true, // *critical for responsive layout* 
      // your own further options 
     }); 
    }); 
</script> 

、JSコールを逆にしてみてください、すべての画像がロードされた後imagesLoadedが呼び出されるように、Packeryウェブページ上で推奨されているように:https://packery.metafizzy.co/layout.html#imagesloaded

Good Luck!