問題タブ [wookmark]

http://jsfiddle.net/mLT8Z/

[すべて表示] ボタンをクリックすると、非表示のコンテンツがすべて表示されて終了するはずです。その後、ウェブサイトの残りの部分は個別に続きます。ただし、[すべて表示] をクリックすると、多くの空白が残ります。

Freetile プラグインを使用していない場合、余白の高さはすべてのタイルの高さに対応します。Freetile プラグインを使用しない場合は発生しません。

Show More プラグインは、Freetile プラグインによって省略されたギャップを認識しないと思います。私は何年もコードをいじっていて、アイデアが尽きてしまいました。

Freetile プラグインのセットアップ:

Show More jQuery プラグインのセットアップ:

HTML

私は wookmark JS を使用してコンテンツを表示しています。フィルタリングは正常に機能しますが、Jquery はあまり熱くありません。特定のナビゲーション リンクまたはページから移動するときに、相対的にフィルター処理されたアイテムを読み込む必要があります

プロトタイプ ページへのリンクは次のとおりです: http://cumminganderton.designnut.co.uk/projects.html

ユーザーがドロップダウンまたはホームページから関連するリンクをクリックしたときにオブジェクトに data-filter-class を渡すにはどうすればよいですか?ドロップダウンで「教育」をクリックすると、ページをロードするときに、 「教育」表示のデータクラス?

私は何日も探していましたが、解決策が見つからないようです..気が狂っています。

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

乾杯

ピンタレストのようなレイアウトのデザインに wookmark js を実装しようとしています。しかし、ページ内の wookmark の通常の 1 つのインスタンスではなく、ページに 2 回適用する必要があります。しかし、私は問題を抱えています。最初の行が配置されると、2 番目の行が下に押し込まれすぎて、間に空きスペースができます。

赤と青の行の間に空白の空白が表示されます。青い行を赤い行のすぐ下から開始したい。

これが私のフィドルです。http://jsfiddle.net/u3ndne03/1/

HTML

CSS

JS

アイデアフレンドはいますか？

jquery の wookmark プラグインを使用して、製品のリストをタイル ビューに表示しています。また、この「タイル」が ajax 呼び出し (無限スクーリング) に含まれています。

新しいページを取得するとき、プラグインの「新しいページ」に適用するためにコンテナを呼び戻しています。

私がこのプラグインで直面している問題は次のとおりです。タイルの数がコンテナーを埋めるのに十分でない場合、プラグインは中央に配置します (4 つのタイル用のスペースがあるが 2 つしかない行を想像してください。プラグインは配置しますこの2つは中央にあります）

また、新しいページをフェッチするときに、タイルが並べ替えられることがあります。

タイルを常に左に揃える方法 (空きスペースはコンテナーの右側になります) と、順序を「オフにする」方法を誰かが知っていますか?

ありがとう

私はCSSのみの解決策を求めていますが（可能であれば）、これはjQueryで非常に簡単であることを知っています。

div のリストがあり、最後の項目はエラー メッセージです。単純なフィルタリング システムがあり、選択したフィルターに一致する div がない場合は、エラー div を表示したいと考えています。

HTML 構造:

私が達成しようとしていること：

div がどのフィルターにも一致しない場合、私のフィルター プラグインはそれらにinactive. したがって、 のクラスを持つすべての div にlistItemも のクラスがあり、クラスに のスタイルinactiveを与えるかどうかを確認する必要があります。errorItemdisplay:block

参考までに、リストとフィルタリング システムに Wookmark プラグインを使用しています。私もLESSを使っています。

ページの読み込み時に要素のリストをレンダリングする React.js コンポーネントがありますが、このリストは、リストから特定の要素を削除し、変更されたリストをコンポーネントの状態で保存するフィルターで更新できます。この機能を機能させることができたので、状態は正しく更新されます。

要素は正しく再レンダリングされますが、レンダリングされる要素が少ないほど、使用されるスペースは少なくなります。これが発生すると、ページが占有する新しいサイズに合わせてページの高さが縮小されず、ページの最後の要素であるフッターの下に空のコンテンツが残ります。

編集 ：

これをもう少し詳しく調べたところ、React.js が問題の原因ではない可能性があると思います。コンポーネントの状態が更新されるたびに imagesLoaded および Wookmark jQuery プラグインを使用する関数を呼び出しますが、状態が変化するたびにこの関数を呼び出すとうまくいきません。呼び出された関数を変更する必要があるか、別の時点で関数を呼び出す必要がありますか?

呼び出される関数は次のように定義されます。