問題タブ [packery]

これについて昨日投稿しましたが、混乱が生じているようです。そのため、もう一度投稿しますが、今回はより明確にしようとします。

私はこのワードプレス テーマの大ファンです: http://prothemeus.com/demo/litho/次の理由から:

1. ブラウザ ウィンドウを常に 100% 満たすようにコンテンツ タイルを配置およびスケーリングします。
2. ブラウザー ウィンドウのサイズを変更すると、これらのタイルが再配置および再スケーリングされるため、ブラウザー ウィンドウ全体が 100% いっぱいになります。
3. ブラウザー ウィンドウのサイズを変更すると、タイルの動きが滑らかになります。タイルの間に隙間ができず、とてもいいアクションです。私が大好きです。
4. タイルは、幅 240 ピクセルなど、一定の量よりも小さくなることはありません。240px 未満になると、グリッドはタイルを再シャッフルして、各行のタイル数を減らします。(これを説明するのは難しいですが、ブラウザ ウィンドウのサイズをいじってみてください。私の言いたいことがわかると思います)

このテーマについて私にとってうまくいかないこと：

1. さまざまなサイズのコンテンツ タイルを表示できません。特定の投稿に注目を集めたいので、これは私にとって重要です。具体的には、注目の投稿タイルは、通常の投稿タイルの幅と高さの 2 倍です。

その結果、Litho テーマの JavaScript を削除し、ノードとコンテナーの名前を変更するなどして、テーマをカスタマイズしました。そして、すべてを Packery ライブラリに置き換えました。これにより、コンテンツ タイルが配置されます。

ただし、これによりさまざまなサイズのコンテンツを使用できますが、流動的な配置が失われています。

Packery が Litho テーマが元々持っていたのと同じ効果を再現できる方法はありますか?

私は周りを見回しましたが、私が見つけた最も近いものはこれです：

http://codepen.io/desandro/pen/BEJhd

ただし、まったく同じ動きではなく、はるかにぎこちなく、見た目も美しくありません. タイル間に重なりがあるか、タイル間にギャップが形成されます。

違いは、最初にすべてのタイルが再スケーリングされ、その後一度だけ再配置されることだと思います。一方、リソ テーマでは、タイルのサイズ変更と再配置が同時に行われるため、はるかに見栄えがよくなります。

次に、タイルの最小サイズはありません。ブラウザー ウィンドウのサイズを変更すると、タイルは縮小するだけです。

(これらのアクションはブラウザーによって若干異なる場合がありますが、これは私の Mac で Safari、Firefox、および Chrome を使用して表示されるものです)

だから私の質問は、Litho テーマの再配置と再スケーリングのアクションを再現できる方法はありますか? ただし、Packery ライブラリを使用していますか? Packery ライブラリはこれを許可していますか?

ありがとうございました

サイトの自動調整画像にPackeryを使用しています： http://jsfiddle.net/tryjkvg3/

時々、画像はこのように表示されます:

正しいのは次のとおりです。

ただし、ウィンドウのサイズを変更すると、画像が調整され、問題がなくなります。ウィンドウでサイズ変更を行わずに毎回画像を正しく表示する方法

私の ember-cli プロジェクトでそれらを使用する必要があります。

始める方法は？

私は端末に書いた：

bower install isotope --save

次に、ember-cli-build.jsに を追加しましapp.import ecc...たが、どうすればよいかわかりません。

次のように、初期化スクリプトを配置する場所:

application.hbsに入れるとエラーが発生し、ルートを変更する{{#link-to}}と機能しなくなります。

何をすべきか？

Web には、これに関する多くのリソースはありません。

div (広告バナー) を他の多数の div 内にランダムに挿入することに問題があります。

この質問から使用している実際の例を見つけました: Insert a div in a random location in a list of divs

ただし、テンプレートは、外側のコンテナー/ターゲットではなく、アイテム/子の 1 つに挿入されています。

これが私のhtmlです：

JS

そして、これは私が出力で得たものです:(通知.item-inner-wrapperは最後の内に配置され、.item親.itemは内に配置されています.listings)

ここで何が間違っていますか？

そして、Vue にカスタム イベント (ドラッグ アンド ドロップ) をリッスンさせる方法を見つけようとしています。たとえば、次のイベントを実行する必要があります。

Packery lib イベント http://packery.metafizzy.co/events.html

そこに私のコード：http://codepen.io/Monocle/pen/ZbeBGL

また、DOM の変更に基づいて $data を更新する方法 (要素の並べ替え後) は?

ブログのタイトルと注目の画像をブロックに取り込むブログ サイズがあります。

その後、ブロックは Packery.js によって編成され、ビューポートの幅全体にタイル状に並べられ、それぞれの間にスペースがなくなります。

これは、すべての div を互いにごちゃ混ぜにする Safari を除く、テスト済みのすべてのブラウザーで正常にレンダリングされます。

これを見たことがありますか？可能な解決策として何を提案できますか?

セットアップは次のとおりです。

このレンダリングの問題をうまく克服した人はいますか? 次のようないくつかのソリューションを試しました。

https://github.com/metafizzy/packery/issues/134

https://github.com/metafizzy/packery/issues/44

最も奇妙なことは、ビューポートのサイズを手動で変更すると、すべてのアイテムがパックされて積み重ねられた状態で、動作が期待どおりになることです。

サイトが Safari で合理的に見えるように、回避策を見つけていただければ幸いです...ありがとう!

Packery などの石積みグリッドを作成することは可能ですが、CSS または SVG を介して作成された三角形を使用していますか? 私はこれをうまく行うことができますが、三角形を隣り合わせにして隙間がないようにするのは難しいようです。

私は次のものを持っています：

.itemは正三角形を表し、.udクラスはそれをひっくり返すだけです。私の最初の考えは、負のマージンを使用して、それぞれの隣にある三角形を引っ張ることでした。ただし、三角形のサイズは異なります。