問題タブ [packery]

.item-content の背景画像が CSS ファイルに設定されている場合に機能し、応答するパッカリー画像グリッドがあります: http://codepen.io/anon/pen/eJdapq

ただし、代わりにハードコードされた HTML 要素を削除すると、次のようになります。

そして、ページの読み込み時に javascript/jquery を介してこれらの項目を動的にグリッドに追加してみてください。

これにより、グリッドではなく左側のページに追加されます。何か案は？

JavaScript を使用して追加した画像ではなく、ハードコードされた DOM 項目を追加した場合をさらに調査すると、グリッドが十分に大きい場合、画像が完全に覆い隠されます。画像が DOM に追加される前に、packery が初期化されていると思われます。

すべての HTML 要素を初期化するまで packery を待機させるにはどうすればよいですか?

webpackを使用してIsotopeでpackeryレイアウトモードを使用しようとしています。

現在のセットアップ:

• Wordpress に付属する jQuery バージョン
• コーヒースクリプト
• 変更された Gulp スターター

これは、同位体のパッカリー レイアウトを呼び出しているファイルです。

エラーが発生し続けますUncaught TypeError: Cannot read property 'packery' of undefined。ファイル内の完全なコンソールと参照は次のとおりです。

私は Webpack が初めてで、モジュールが必要なため、明らかな何かが欠けている可能性があります。

これが私のwebpack構成ファイルです：

余談ですが、アイソトープjQueryプラグインも認識できません。 呼び出す$('.grid').isotope()とUncaught TypeError: $(...).isotope is not a functionエラーになります。それらが何らかの形で関連しているかどうかはわかりません。jQueryを参照したにもかかわらず$ = require 'jquery'

どんな助けでも大歓迎です。

Packery 画像のグリッドを表示するために使用しています。

ここに私の関連する HTML があります:

CSS は次のとおりです。

そして最後に JS :

私の問題

ページが読み込まれると、次のようになります。

スクロールバーに注目してください。グリッドは画面よりも広いです。

コンソールを開いたり、ブラウザー ウィンドウのサイズを変更したり、何か他のことを行って更新をトリガーしたりすると、次のようになります。

水平スクロールバーがなくなり、アイテム間にガターがなくなりました。意図したとおりに機能するようになりました。

そもそもアイテムが適切に配置されていないのはなぜですか? ドキュメントと、プラグインを使用したいくつかのペン/フィドルを見ましたが、何が欠けているのかわかりません。

を使用して最初の呼び出しを遅らせようとしましsetTimeout()たが、うまくいきません。最初のスクリーンショットに表示されているものを取得するまでの時間を遅らせるだけです。アイテムが移動する前に、ウィンドウのサイズを変更するか、手動で更新をトリガーする必要があります。

この質問を見つけました。答えは私にとって完璧です。この質問の答えを実装するのを手伝ってもらえますか? この変更をng-repetcodepen またはどこかで使用するために行うことはできますか? 彼が実装すると言ったとき、彼が何を意味していたのかわかりません：

1）コントローラーが受け取るイベントを含むディレクティブを使用する必要がありました

この例nr-repeatで withを使用する方法を誰かがよりよく説明できますか?packery

lazysizesを使用して画像を遅延読み込みしていますが、Packeryも使用しようとしています。lazysizes がすべての写真を読み込んだ後に、Packery スクリプトを起動する方法がわかりません。写真が正しくレイアウトされないからです。これは私が持っているコードです

lazysizesがクラス「lazyloaded」をimgクラスに追加した後に起動したいのは、lazyloadをlazyloadedに置き換えるからです。

現在、 Packery.jsを使用してページを作成しています。

現在、幅 4 タイルの非常に単純なグリッドがあり、タイルをクリックすると、このデモのように拡大されます: http://codepen.io/desandro/pen/pgVQLz

ただし、私の場合、タイルは絵であり、クリックすると画面サイズに応じて拡大されるため、ビューポートを少しスクロールして、画面の中央に完全に表示されるようにする必要があります。

問題は、Packery がタイルの動きをアニメーション化するため、単純に使用できないことです。

その場合、アニメーションの前の位置に向かってスクロールするためです。

これを修正する最良の方法は何ですか？

私はこれで数時間立ち往生しています。私も試しました：

...変換アニメーションのオフセットを見つけるためですが、汚いディックスであることに加えて、値を見つけることさえできませんでした...

ありがとう！