問題タブ [packery]

画像をフィルタリングする必要があるため、JQuery の Isotope プラグインのフィルタリング機能を模倣しようとしていますが、実際に Isotope を使用すると、ページ上のいくつかのパララックス スクロール要素に問題が発生します。

データ属性を持たない画像を切り替えるために、この短い JQuery スニペットを作成data-filterしました。一致しないアイテムが削除されると、プラグインがアイテムを並べ替えないという事実を除けば、Packery正常に動作します。

私が抱えている問題は、別のフィルター リンクをクリックするとフィルターをリセットする必要があることです。別のフィルターをクリックすると、最初にフィルター処理された要素が消え、フィルター処理された要素以外のすべての要素が返されます。解決策は簡単だと確信していますが、JQuery の知識が非常に限られているため、これにアプローチする方法がわかりません。

コード

また、1 つのリンクですべての要素を表示状態に戻す方法もありません。

これはpythonで実装されています（より多くのテスト）

js/DOM ベースのビン パッキングにPackery.js jQuery プラグインを使用して、上の画像 (Python で実装) のような結果に興味があります。Packery は左から右、上から下に動作するように構築されていますが、境界としてビューポートではなく円形のバウンディング ボックスを使用するとうまくいくのではないかと思います。

最終的には、これを使用して、さまざまなサイズと比率の多数の画像サムネイルを表示したいと考えています。

コード例やその他のポインタは高く評価されます。

このGetting Loopyチュートリアルに取り組んで、Packery.js レイアウトに投稿を追加しましたが、ホームページではうまく機能しますが、アーカイブ (archive.php) ページに使用しようとすると、すべての投稿が引き続き読み込まれます。そのカテゴリ（または検索クエリなど）に固有の投稿ではありません。WordPressのarchive.phpループがAJAXでトリガーしているときに本質的に持っているように見えるフィルタリングを保持するにはどうすればよいですか?

<?php while (have_posts()) : the_post();?>現在、 archive.php ページのメイン ループとして、最初の 12 のカテゴリ投稿を正しく呼び出している標準があります。次に、2 番目のループを使用して追加の投稿を追加しようとしました。前に言ったように、これは (カテゴリだけでなく) すべての投稿を呼び出します。私の現在の試みは、2 番目のループでカテゴリを特定することでしたが、間違っているようです。関連する現在のコードは以下のとおりです (変更されていないコードは上記のチュートリアル リンクにあります)。何か案は？ありがとう！

フッターの AJAX トリガー スクリプト:

archive-more-loop.php のベース:

ajax で返されたアイテムを Packery に追加し、現在のアイテムを削除して、新しいアイテムをレイアウトしたいと考えています。

Metafizzy（開発者）のフォークペンを使用してcodepenで作業しています

これはまさに私が欲しい機能です: http://codepen.io/anon/pen/Cnbxu/

ただし、私のコードケースでは、すでに作成されている要素配列を使用しているため、items 配列を作成したり、DOM に追加したりする必要はありません。

これが私が使用しているコードのサンプルです。

要素があり、 console.log($(data)) が応答を示し、インスペクターを確認すると、コンテナー div 内に返された要素が表示されます。問題は、私が何をしても、Packery に新しいアイテムを「認識」させ、それに応じてレイアウトさせることができないことです。elems は空を返します。addItems()、prepended()、appended() メソッドを無駄に使用しました。

何か助けはありますか？

だから私はこのようなことをしようとしています: http://prothemeus.com/demo/litho/

私は遭遇しました： http://masonry.desandro.com/、http://isotope.metafizzy.co/、http://packery.metafizzy.co/それらはすべて本当に似ていますが、それらのどれも提供していません上のウェブサイトのようにスケーリングします。これらのプラグインのいずれかを使用してそのようなものを作成するにはどうすればよいですか、またはデフォルトでコンテナに合わせてスケーリングするオプションを提供するものを誰かが知っていますか?

デモを見る限り、アイソトープがレイアウトを処理していることはわかりましたが、実際のスケーリングを行うコードを追跡することはできませんでした。

どんな助けでも大いに感謝します。

こんにちは、packery ライブラリを使用して、さまざまなアイテムを含むルックブックを作成しようとしています。各アイテムには、packery を使用してパックする画像の配列があります。

それぞれのコンテナー div を作成しましたが、packery は最初のコンテナーでのみ機能しているようです。誰でも私を助けることができますか？

ここにHTMLがあります

以下は、非常に基本的な JavaScript です。

});

無限スクロールとpackeryを実装しようとしています。私は決してコーダーではありませんが、これは私が仕事に取り掛かることができたものです:

問題は、次の例のように、キャンバスと組み合わせて packetry.spaces を使用して要素間のギャップを埋めたいことです: http://codepen.io/desandro/pen/shleG

私はコードを深く理解していませんが、この行を含むここにコピーして貼り付けることで満足のいく結果を得ることができました

などしかし...この方法でpackeryを開始した場合にのみ、これを機能させることができました:

querySelectorで開始するときに、同じ「コンテナ」で無限スクロールを機能させることができませんでした。

だから今、私はpackeryで動作するinfinitescroll OR fill-gapsを持っていますが、両方ではありません。

それをすべて機能させる簡単な方法があれば、私は本当に頭を上げていただければ幸いです!

メイン列に Packery を含む 2 列のレイアウトがあります。

これは、極小デバイス、小型デバイス、および大型デバイスで正常に機能します。中型デバイスでは、「2 列のボックス」が横に並んでいません。その下でジャンプしています。

この問題の codepen を作成しました: http://codepen.io/anon/pen/pwJsa

誰かが助けてくれることを願っています！

Tumblr テーマ デザインでJquery Infinite AJAX スクロールを使用して Packeryを実装するのに問題があります。「Uncaught ReferenceError: IASCallbacks is not defined」が返され続け、その理由を特定できませんでした。

これは私がまとめたものですが、Javascript はそれほど得意ではありません。

誰かが助けてくれれば幸いです。http://digitalsocialnetwork.tumblr.com/のライブ ページをチェックしてください。