このプラグインを使用したいと思います: http://packery.metafizzy.co/レイアウト モード: フロントページで説明されているように細心の注意を払ってください。ドキュメントのすべてのページに目を通しましたが、デフォルトの石積みレイアウトではなく細心の注意を払って設定する方法が見つかりません!

何か案は？

この jquery プラグインhttp://packery.metafizzy.co/を使用して動的グリッド レイアウトを作成しています。プラグインは完全に機能しています。

問題は ：

クリック イベントで動的グリッドを追加するオプションを作成しようとしています。グリッドの html コードを手作業でコーディングすると、グリッドは完全に表示されますが、jquery を使用してグリッド コードをテンプレート レイアウトに追加すると、グリッドはレイアウトの最上部から表示され、プラグインはグリッド位置。

私のコードをチェックして、ここで問題をライブで見ることができます: http://jsfiddle.net/A7ubj/2/

jquery追加コードがグリッドを一番上に置いているため、プラグインがグリッドを調整していないと思います。

プラグインがグリッドを完全に調整できるようにグリッドを追加する方法を教えてください。

これは私が追加している方法です：

そして、これは私のコード全体です:

JS:

CSS:

HTML:

packeryを使用してアニメーションに取り組んでいます。タイルはグリッドに配置されており、クリックすると拡大され、それに応じてタイルが動的に再配置されます。サイズ変更は、CSS3 トランジションを使用してアニメーション化されます。次のコードペンで示されているように、これらはすべて IE10 と Firefox で期待どおりに機能します: http://codepen.io/anon/pen/ilkmK

WebKit ベースのブラウザー (Windows でテスト済み) の同じコードは、サイズ変更や再配置の際に、ボックスが激しく小刻みに揺れたり震えたりします。

既に問題を提出しましたが、問題は WebKit の幅と高さの遷移が最適化されていないことのようです。jQuery.animate を使用して同じアニメーションを実装すると、状況が少し改善されましたが、揺れはなくなりません。特に遅いシステムでは、非常に目立ちます。

今のところ、JavaScript バージョンをフォールバックまたは Webkit ブラウザーのわずかに優れたバージョンとして使用していますが、最適ではありません。ここからどこへ行けばいいのかわからないので、Stackoverflow が助けてくれることを期待していました。

Chrome/Safari でこれを機能させる方法についてのヒントがあれば、とても感謝しています。

「Packery」という非常にクールなスクリプトを見つけたので、Masonry の有名なグリッド スクリプトの代わりにこれを使用することにしました。

しかし、スクリプトが提供されているサイトにはドキュメントがほとんどないので、これを WordPress の query_posts と Infinitescroll も imagesLoaded と統合する方法を知りたいです。

1. パッカリー
2. 無限スクロール
3. 読み込まれた画像

これらを利用してサンプルのWPサイトを以下のように設定したのですが、InfinitescrollやどうやらimagesLoadedもうまくいきません。

index.php/WordPress

サンプルサイトのURLはこちらhttp://itadakimasu.sakura.ne.jp/packery/、Packeryとdraggyスクリプトは問題ないように見えますが、無限スクロールはNOでなければなりません...

もう1つ、最初に「追加オプション」に依存せずにページがロードされたときにimagesLoaded JSで「進行」アニメーションを使用する方法の問題に直面しました。

このコードは次のように見つかりましたが、ページの読み込み効果に適応したこれを再利用する方法がわかりません。

参照: http://codepen.io/desandro/pen/xtzmg

append オプションの使い方がよくわからないので、自分で直すのは至難の業です。

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

よろしくお願いします、

私はpackeryを使用していますが、それは良さそうです-私が本当にやろうとしているのは、ロード時に移行することです。

組み込みの機能を使用してアイテムを追加 (追加) すると、移行がうまくいきますが、これらのアイテムを追加することなく、ロード時に最初のタイルのロットでそれを取得しようとしています。

これは私が実行するコードです

そして、そのコードは、jQuery で準備が整ったドキュメントで実行されます。

これを有効にするためのオプションがドキュメント内に表示されません - オプションになると思いました

誰でも助けることができますか？

乾杯

元の質問:

さて、これはプレーンでシンプルなcssです。しかし、私のサイトにバグがあり、それを取り除くことができません!

このデザインでサイトを作っています: http://cl.ly/image/1j231y2x3w07

このサイトは完全にレスポンシブで、css-aspect-ratio-technique を利用しています。

HTML:

CSS/LESS:

あなたはそれの要点を得る。

また、フロートと位置を追跡するために、優れたプラグインPackery.jsも利用しています。私が主に使用するのは、サイズ変更とアニメーションのヘルパーです。

しかし、完全にレスポンシブであることは私に問題をもたらします。たとえば、ブラウザ ウィンドウの幅が1304pxの場合、上記の手法により、高さの値が奇数 (例: 477.4px) になります。奇数のため、デザインはおろか、グリッドを維持することもできません。

また、ウィンドウの幅が 4 で割り切れない場合は、オーバーラップまたは 1 ピクセルの白い線が表示されます。

私はかなり長い間これに取り組んできましたが、新鮮な目が必要です。ですから、誰かが解決策への意見を持っていれば、私はとても幸せです. ありがとう ：-）

ソリューション：

@ScottSに大いに感謝します–素晴らしいアドバイス！