問題タブ [masonry]

これは画像がないと説明しきれません。ご覧ください。

すべてを正しく行ったと確信していますが、何らかの理由で div が下に移動していません。これが私のコードです：

HTML

CSS

また、何らかの理由で、Codepen でレンダリングすると機能するようです: http://codepen.io/ellis/pen/BCsoE

私は Masonry と協力して Shopify のデモ ストアを作成しています。そこでは、商品のページネーションを行う代わりに、無限スクロールを適応させて商品をロードしています。ページのサイズを変更しようとすると、石積みが石積みの div の高さを再計算するまで、これはすべて正常に機能します。これを行いますが、スクロール時にロードされたすべての要素ではなく、最初のページのロード時にロードされた要素の高さのみが含まれます。

これが私のコードです：

デモ ページへのリンクは次のとおりです: http://sweetpea-bicycles.myshopify.com/collections/accessories

繰り返しますが、この問題は、画面を小さくまたは大きくしてグリッド幅を変更した場合にのみ発生します。

みんな！

私は最初のウェブサイトをゼロから構築しています。HTML と CSS は知っていますが、JavaScript と PHP の知識は本当に基本的なものです。そのため、Web サイトでは Masonry グリッド レイアウト ライブラリを使用し、それを ImagesLoaded と組み合わせて、画像が重ならないようにしています。公式サイトの指示に従って HTML にスクリプトを含めたのですが、なぜかまったく機能しません。(ImagesLoaded を使用しない Masonry だけで動作していましたが、画像が重なっています。) 何が間違っているのか教えてください。

ウェブページはこちらです。ご覧のとおり、Masonry は初期化されていません。

http://vprilenska.netai.net/design_archandfilm.php

これがスクリプトです。ボディ終了タグの前に、HTML の下部に含めました。

はい、石積みはアイテムに適用されます。各アイテムは、画像とキャプションを含む div で、右にフロートされます。すべての画像はコンテナの石積みにあります。列幅とガターは要素によって定義されます。

タンブラーでメーソンリーをいじっています。何らかの理由で、2 行目に大きなスペースができてしまいます。私は何かが欠けていると思います。理由がわからない。

http://geedesign2.tumblr.com/ (ページ下部)

周りに専門家はいますか？

どうもありがとうございます

石積みの列の下部にある各アイテムに、CSS を使用したターゲティングを許可するクラスを与える方法はありますか?

列の数はページ幅によって変化するため、列の下部にある項目が変化し、ページのサイズが増減します。

問題を説明するために、下の2つの画像の列の下部にある各アイテムから境界線の下部を削除したいと思います:

Masonry を使用しています - HTML バージョン

私はdivを持っています:

私は約10を持っています：

問題は、ページが最初にロードされる (キャッシュされていない) ときに、最初のいくつかの項目が正常に表示されるが、ページのさらに下にある項目が互いの上に積み重なることです。フッターにも重なっています。ブラウザーを更新する (またはデバイスを回転させる) と、すべて正常に動作しますが、これは明らかに新しい訪問者にとって理想的ではありません.

JS はページの下部にありましたが、上部に移動しても同じでした。

誰もこれに遭遇したことがありますか？

どうもありがとう。

Famo.us Angular 内で石積みのビューをアーカイブする方法を知っている人はいますか? 提供されている Grid View は非常に優れていますが、クリックして 1 つのサーフェスのサイズを変更し、その周りに他のサーフェスを配置するような機能はサポートしていません。

現在、2 行と複数列のサーフェスを構築しています。1 つのサーフェスをクリックすると、2 行 2 列のサイズにサイズ変更され、右側に他の 3 つの要素が追加されます。

famo.us サーフェス内に石材、アイソトープ、またはパッカリー div を含めることも試みました。しかし、うまくいきませんでした。

現在の famo.us の状態でどちらのアプローチが優れているかについて、誰か良いアドバイスを得た人はいますか?

ご挨拶

マイケル

Masonry を imagesLoaded で使用すると少し問題が発生します。画像間の間隔は、ウィンドウ サイズをズームすると消えてしまいます。誰かが私の問題の解決策を教えてくれることを願っています。

http://jsfiddle.net/7hs958sr/embedded/result/

HTML

CSS

JS