問題タブ [jquery-masonry]

ページに（ポートフォリオ用の）写真の基本的なレイアウトがあります。2 つの異なるサイズのイメージ ブリックがあり、大きい方が小さい方に比例し、幅と高さがちょうど 2 倍になり、ブロックまたはウィンドウの間に余白がありません。数十個の小さなブロックと混ざった数個の大きなブロックしかありません。これはレスポンシブ デザインであるため、フルサイズのサイトでは 20% の列が 5 つ、ウィンドウ サイズが特定の幅を下回ると 33.333% の列が 3 つになり、すべて 100% の最大幅のコンテナー内に収まります。画像は CSS を使用して幅 100%、高さ自動に設定され、各ブリック内にあります。私が説明していることを説明するために、ワイヤーフレームを含めました。

私が抱えている問題は、アイソトープを流体レイアウトに対応させることです。最大幅より広いウィンドウにページをロードすると、ブロックが正確に期待どおりに配置されます。ただし、ブラウザー ウィンドウを最大幅よりも小さくすると、ブロックが非常に不安定になり始めます。次のようなバリエーションがあります。間に空の列がある 2 つの列に積み重ねられます。画像間のギャップ; 大きな画像の下に空の行を残します。

私はおそらく自分自身をうまく説明していませんが、流動的なレイアウトでIsotopeを使用した経験があり、洞察を持っている人がいるかどうか疑問に思っています.

私はプログラミング（javascript）の初心者ですが、tumblrのテーマを正しく機能させるために、過去数日間かなりの調査を行いました。私の質問が一般的であることは知っていますが、多くの同様の例で与えられたコードの一部を正しく統合するのに十分な知識がないようです。

私のテーマは、tumblr の「1 ページあたり 15 の投稿」という制限をオーバーライドし、「エンドレス スクロール」オプションを使用すると、すべての投稿 (すべての写真) を 1 つのエンドレス ページに配置する必要があります。まあ、そうではありません。hereからの少しの助けを借りて、私は {block:Posts} を でラップすることができ、 masonry() 呼び出しでいくつかのランダムな変更を加えて、これになりました

ご覧のとおり、私の写真は重なり合っていません (ついに!) が、最初の 15 回の投稿の後、新しいページが作成され、最後の写真が正しく配置されていないように見えます。

私のjQuery石積みコードはこれです:

私は知っています、それは混乱しています...本当に助けていただければ幸いです。

最近、物事が片付いたので、ポートフォリオの作業を再開しました。それはまだ非常に新鮮ですが、画像の jquery .load() でいくつかの助けを借りることができました。

http://progress.patrikarvidsson.com/

私はhtml5boilerplateでjQueryを使用しています。この上に、Masonry と Lightbox があります。グレースケールのコードが原因だとは思わないので、ここには含めません。以下は、scripts.js ファイルの上部です (グレースケール コードが続く)。

Html は次のようになります (構造は引き続き html5boilerplate に従います。JS ファイルは後ですが、modernizr は前です)

fadeIn() は機能しますが、私が望むようには機能しません。画像が最初に読み込まれ、その後、ドキュメントが読み込まれると自動的に非表示になり、次にフェードインが有効になります。上記のリンクにアクセスすると、おそらくそれを見ることができます。基本的に、私にとってはこのように見えます。

これは、更新を押すたびに発生します。これは Chrome でのものです。Firefox ではフェードインはまったく機能しませんが、他のコンピューターではまだテストしていません。結局、何が問題なのかわかりません。

アップデート

代わりに css3-animation を使用することにしました。それはかなりうまく機能しますが、古いブラウザでどのように見えるかはまだわかりません.

とはいえ、なぜこの問題が発生するのか、私はまだ興味があります。したがって、回答は引き続き推奨されます。

スクリプト jQuery Masonry に問題があります。それは箱を積み重ねることについてです - 現在、幅に制限されて、それらを水平に配置します。ただし、Chciałym はレベルに限定され、レベル内で同じように並べられているため、水平スクロールが可能です。私が見たところ、彼らのウェブサイトにはそのような解決策はありませんでした。

新聞・雑誌の記事のように浮かぶレイアウトを目指しています。これは、 jQueryのMasonryが行うことと似ています。しかし、私はCSS3のみを使用してそれを達成しようとしていました。おそらくboxdisplayプロパティでそれができると思いました。何度か試してみましたが、親の列幅が満たされていると、アイテムを下にスライドさせることができませんでした。

CSSのみを使用してこのレイアウトを実現する方法はありますか？

マークアップは次のようになります。

ここでは、セクションは左にフロートし、列キューでより適切に調整されます（単純なフロートのように、前のセクションのベースラインを下回らないようにします）。

彼らのウェブサイトの Masonry ヘルプ セクションで対処されているオーバーラップの問題が発生しています。ただし、これは Firefox でのみ発生しており、FF 8 に更新してから発生したようです。 IE で動作します)。Infinite Scroll + Masonry は、今日まで FF で完全に機能していました。imagesLoaded プラグインも $(window).load も問題を解決していない場合、オーバーラップの問題を解決するための他の提案はありますか?

Masonryがスタイルを設定する機会が得られるまで（スタイルが設定されていないコンテンツの恐ろしいフラッシュを防ぐために）コンテンツを非表示にしてから、ローダーgifを非表示にします。コードスニペットは次のとおりです。

ただし、.show（）が呼び出されたときに、Masonryがコンテンツに適用されていないことに気付きました。この質問で、Masonryの作成者は、現在Masonryコールバックが適切にサポートされていないことを示唆していることを知っています。誰かがまともな回避策を思いついたことがありますか？

ありがとう！

組積造プラグインは、レンガを柱に積み上げます。列を最小化するためのレンガの並べ替えです。列幅よりも広いブリックをどのように並べ替えることができますか?

私は3列の用語集ページを特徴とするWordpressプロジェクトに取り組んでいます。私はMasonryを使用して、すべてのエントリをうまく組み合わせるようにしています。これはほぼ機能していますが、完全ではありません。

問題のページは次のとおりです。http：//ratherbrilliant.com/staging/starstruck/category/glossary/browse-A/

これは通常のWordpressの設定であり、コンテナーdivにネストされた多数の記事があることを意味します。

記事はパーセンテージ幅で浮かんでいます：

デフォルトのMasonryセットアップのみを使用していますが、それを機能させるためにあらゆる種類のオプションを試しました。

ほぼ機能していますが、下にスクロールすると、最初のエントリとその下のエントリの間に大きなギャップが表示されます。私はこれを機能させることができません。どんな助けでも大歓迎です。

ありがとうございました！

パーセンテージ幅のdivでjquery masonryを動作させる方法はありますか? 幅が 25%、50%、75%、100% の可変レイアウトを作成しようとしています。しかし、 % で幅を設定するとすぐに、自動サイズ変更が機能しなくなり、 mason onresize を手動でトリガーしようとすると、丸めエラーが発生し、div がジャンプします。また、高さを無視することもあれば、div の配置を停止してすべてを 0,0 に配置することもあるという非常にバグがあります。

HTML マークアップ:

CSS プロパティ:

任意の入力に対するムチョス グラシアス、J