問題タブ [packery]

私のtumblrテーマではcanvas、背景に何かを描いていますが、無限スクロールを使用すると、canvas大きすぎて描画できなくなるまでにそれほど時間がかかりません（ブラウザなどによって異なります-制限に達していません） Chrome ではまだ）。

ここで ( packery 内の)canvas投稿間のギャップを埋めるために提案されたため、を使用していますが、代わりに背景を持つブロックを使用して絶対配置された要素を作成し、サイズ変更時に破棄して再作成するのがはるかに悪い解決策になるかどうか疑問に思っていました/再レイアウト。

最善の解決策は何ですか？より多くの投稿が読み込まれるたびに、javascript でオンザフライでより多くのキャンバスを作成する必要がありますか?もしそうなら、これを行うための最良の方法は何でしょうか? キャンバスを捨てて、代わりに絶対配置要素を使用するのは恐ろしい考えでしょうか?

私はpackeryライブラリを使用しています。

問題は、メソッドの 2 番目のパラメーターに関するfitものです。ドキュメントには要素であるべきだと書かれていますが、「要素」が何を意味するのかわかりません。

次のリンクは、私の問題の例です。

リンク

サイズ変更ボタンをクリックすると、fit動作していないようです。機能している場合、「post 1」のサイズを変更すると、「post 2」は重複するのではなく 2 行目に移動するはずです。

次のリンクは私の言いたいことの例ですが、代わりにボタンでトリガーしたいと思います。

リンク

誰かが私がプロジェクトに使用しているパッカリーの経験を持っていることを願っています.

水平レイアウトが機能しません。HTML で packery オブジェクトを宣言すると、ある程度は機能するようです。

ドキュメントが示唆するように、CSSを介して幅と高さが変更されていないように見えますが。しかし、Javascript を使用する必要があるため、これ以上掘り下げる必要はありません。そして、同等のものはまったく機能していないようです:

これにより<div>、packery オブジェクトが高さ 0px、幅 4px に割り当てられた要素が生成されます。(4px の幅は、おそらく一部の項目の 1px の境界線に由来します。) packery のドキュメントによると、水平レイアウトでは高さを設定する必要があります。しかし、packery が HTML または Javascript で初期化されたかどうかに関係なく、ドキュメントによって提供される CSS は何もしないようです。

それでも、挿入したアイテムは表示されず、パッカリ<div>は 4px x 0px です。そこで、Javascript でコンテナーの高さを強制しました。

これにより、要素の高さが増加しますが、幅は 4 のままです。したがって、すべての要素は本質的に幅がゼロであり、見えません。そこで、コンテナの幅を強制しようとしました:

しかし、この幅は無視されているようです。<div>Chrome の開発者モードで要素エディターを使用して の幅を強制することができます。これにより、醜いコンテンツが表示されます。<div>しかし、Javascript で の幅を設定するにはどうすればよいですか? の呼び出しの前または後に、packery が設定した幅をオーバーライドしているようpackery()です。

packery のすべては、垂直レイアウトに最適に機能するようです。しかし、私は本当に水平レイアウトを使用したいのですが、明らかに何か間違っています。誰でも助けることができますか？

私の質問は、石積みスタイルのレイアウトを作成するために使用しているpackeryと呼ばれる優れた JavaScript ライブラリに関するものです。また、 draggabillyという姉妹スクリプトを使用して、ユーザーがページ内の項目をドラッグ アンド ドロップ (並べ替え) できるようにしています。現在、私は従来の使用法とかなり似たようなことをしています: http://codepen.io/desandro/pen/CKbkw

項目をドラッグすると、インターフェイスは要素をドロップするのに十分な大きさのスペースを残します。要素がドロップされる場所であることを示すために、そこに div を一時的に配置したかったのです。私が本当に必要としているのは、ドラッグされた要素が解放されたときに静止する場所の x、y 座標を取得する方法だけですが、その情報を取得する方法がわかりません。

そして、divを表示して正しい座標を提供することを期待するdragMoveリスナーを使用しています。

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

複数のページをパックするためにpackeryを使用しており、トランジションにjquery mobile pagecontainerを使用しています。各遷移で、packery レイアウトが折りたたまれます。コンテナ div の高さが 0 に変わります。

ページ遷移時にパッカリー レイアウトを保持するにはどうすればよいですか。

前もって感謝します。

パッカリーをポリマー要素と組み合わせて使用​​する方法について、私は何時間も探してきました。私が達成したいのは、コンテンツアイテムである要素を含むコンテンツリストである要素です。商品を「パック詰め」したい。

明確にするために：

フィドル

ファンデーションを使用して中央に配置された div があります。その div の中には、私が行った作業の背景画像を持つ 215 x 215 の div があります。

パッカリーがうまく動作するようになりました。私の問題は、これらの div をコンテナー内の中央に配置したいということです。しかし、1 行にいくつの div があるかはわかりません。そのため、パディングを与える画像が新しい行に移動すると混乱するため、単にパディングを与えることはできません。

どうすればこれを修正できますか?

ありがとう！

ここに私のHTMLがあります

CSS

packery と draggabilly を使用して並べ替え可能なアイテムのグリッドを作成しようとすると、問題が発生します。

jquery ui dragabble も試しましたが、問題は残ります。アイテムをドラッグ アンド ドロップすると、垂直方向の配置が崩れて、アイテムが行の途中で「スナップ」する可能性があります。これにより、アイテムの順序も崩れます。

http://jsfiddle.net/foobass/sasrx654/

項目を水平方向にドラッグすると、所定の位置にスナップされ、適切に整列されます。垂直方向にドラッグすると、配置がずれて正しく配置されません。また、最後のアイテムの位置が変更されます。

誰かが私が間違っているかもしれないことを提案できますか?

何らかの理由で、ドロップされたアイテムの「トップ」の css 値とその下のアイテムが正しくない値で動的に設定されているようです。