問題タブ [jquery-masonry]

ポートフォリオWebサイトにMasonryプラグイン（http://www.4pixels.co.uk/）で構築された3つのページがあります。最初のページでは、fancyboxはいくつかの画像に対して完全に機能します。

しかし、infiniteScrollを使用して最初のページの下部にあるページ2をロードすると、ファンシーボックスのリンクが機能しなくなり、厚いボックスの画像を新しいページにロードするだけです。

ページ2（http://www.4pixels.co.uk/index2.html）をブラウザーに直接ロードすると、（すべてのcss / jsで）正常に機能しました。それ以来、このページからjsとcssを削除して、1ページからロードしましたが、違いはなく、ファンシーボックスはまだ機能しません（試してみる画像は、Winston Ellis Webサイトのレスポンシブ画面です）

すべての最高のアンディ

私が試してみました

しかし、まだ機能していません。私はあなたの例が機能しているのを見るので、私が間違っているのか分からないので、それを引き離さなければなりません。

クリックするたびに新しい newHeight と newDistance を追加し続けているように見えます。元の高さを上部にグローバル変数で保存し、データを使用してそれを実行しようとしていますが、奇妙な結果が得られます。基本的にはリセットできるはずです以前と同じように newDistance と newHeight を最初の元の値に変更して、クリックでロットを実行しましたが、そうではなく、クリックするたびに新しい値が追加され、結果としてレイアウトが壊れました:

誰？

人気のあるjqueryプラグインMasonryを使用して、列をレイアウトにうまく適合させています。私はsetIntervalを使用して、BoltHeadがここで持っていたのとまったく同じ問題を解決しています： JQuery、setTimeoutが機能していません

解決策は、setTimeoutを使用して、次のように石積みプラグインを毎秒更新することです。

これはブラウザのパフォーマンスに関しては悪い考えですか？このかなり重い関数を毎秒実行するjqueryは、処理速度を低下させると思います。これは悪い習慣ですか？これを行う理由は、.slideToggleを使用してより多くのコンテンツをスライドダウンしているため、レイアウトを再調整するために石積みが必要だったためです。このソリューションについて何か考えはありますか？

私が持っているとしましょう

CSS：

HTML：

ラップボックスに適用されたclearfixは、絶対位置の要素が含まれているため機能しません。

したがって、ラップボックスを拡張するには、jQueryを使用してボックスの高さを計算する必要があります。これらのボックスはランダムな高さであるため、高さはわかりません。また、クライアントによって常に生成されるため、ボックスの総数もわかりません。それを解決する一般的なjQueryが必要です。mainWrapを延長しないと、ボックスが切断され、オーバーフローを使用する必要があります。他の理由で非表示になります。

これについて何か助けはありますか？

本当にこれで頭を叩いています。

私はアイソトープhttp://isotope.metafizzy.co/custom-layout-modes/centered-masonry.htmlを使用しています。

#containerが相対的に設定されており、上部のナビゲーションと非表示のサブナビゲーションが付いたヘッドがあります。ナビゲーションのリンクをクリックすると、サブナビゲーションが展開されます。罰金。私はボックスの相対にラッパーを設定しています。これらのボックスは絶対に同位体によって設定されています。

問題は、サブナビゲーションが展開されると、コンテンツは押し下げられますが、ボックスが切り取られることです。#containerはoverflow：hiddenを使用しており、表示することはできません。そうしないと、他の問題が発生します。私は非常に多くの解決策を試しましたが、それを理解することはできません。

サイズ変更と再配置に自分のコードを配置できる場所が見つかりません。コールバックを挿入する場所を見つける必要があります。これは私が見なければならない唯一のビットであり、サイズ変更時にコールバック関数を挿入する場所を見つけることができません。

何か案が？

私のページの 1 つで、サーバーから大量の画像を取得し、それらを画面にダンプし、石積みを使用してそれらをすべてレイアウトするという問題が発生しています。

すべての画像が読み込まれますが、画像が読み込まれる前に石積みが呼び出されているようで、すべての画像が混乱して読み込まれます。お見せするためにいくつかのスクリーンショットを添付しました。これは他のページでも発生することに注意してください。

そして、私が使用している重要なコードのいくつか。

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

-R

私は基本的に、ブラウザウィンドウまたは画面幅が特定の数値を下回ったときに、石工スクリプトのレイアウトを変更しようとしています。ブラウザの幅を変更したときに（リアルタイムで）応答するようにしたいのですが、現時点では壊れています。また、何らかの理由で、最初にロードされたスクリプトのみが機能します。Masonry の isResizable:true オプションを既にテストしましたが、必要な効果が得られません。誰でも修正を提供できますか？これは Masonry のページです。誰かがこのページに関する解決策を見つけるのを手伝ってくれるかどうか疑問に思っています: http://masonry.desandro.com/docs/methods.html

これが私のコードです：

編集 ===============

更新されたコード:

私はこのプラグインを使用しています: http://masonry.desandro.com/

現在、960px レイアウト用のプラグインを初期化しています。このためのコードは次のとおりです。

画面幅またはブラウザ ウィンドウ幅が 1225px より大きい場合、columnWidth の数値を 113 から 146 に変更したいと考えています。どうすればいいですか？

私はここで少し絶望的です。Drupal.behaviours で見つけたものはすべて読んでいますが、明らかにまだ十分ではありません。Infinitescroll プラグインを使用して石積みグリッドを実行し、新しい画像を石積みに添付してみます。これはこれまでのところうまくいきます。次に自分の Web サイトに実装したかったのは、ホバー効果 (画像に関する情報を表示する) と、後で画像をより大きなサイズで表示するためのファンシーボックスです。

新しく追加されたコンテンツでもホバー イベントを発生させたい場合は、Drupal.behaviours を再接続する必要があることを読みました。

Drupal.attachBehaviours() を実際に動作させるには、どこに記述すればよいですか? または、atm が表示されない他のエラーがありますか? drupal 7 でこの組み合わせの実際の「公式」実行バージョンが存在しないことを経験したので、理解できるように質問を書いて、おそらく他の誰かにも役立つことを願っています。