1

JQuery Isotope を使用して JQuery Masonry の水平バージョンを構築しようとしています。結果は次のようになります。

レイアウトモード(masonryHorizo​​ntal オプションをクリック)。

サイトの指示に従って: Masonry Horizo​​ntal 私のスクリプトは次のようになります。

$('#isotopecontainer').isotope({
        itemSelector : '.item',
        masonry : {
          columnWidth : 270
        }
 });

ただし、次の 2 つのことが起こっています。

1) ページが読み込まれると、#isotopecontainerdiv の高さが 60px に設定されるため、div の上部のみが表示されます.item。

2) ブラウザのサイズを変更すると、#isotopecontainerdiv が展開されますが.item、例のように div が整列しません。

誰かが私を正しい方向に向けるのを手伝ってもらえますか? 私のデモサイトはこちらです。

ありがとう。

4

3 に答える 3

1

デモ サイトは Firefox で動作しています。

その通りですが、Chrome ではそうではありません。問題はかなり単純です。画像に幅と高さの属性を設定する必要があります。または、Chrome は、ファイルを取得するまで、それらを 0px の高さ (line-height 値のデフォルトの高さを持つコンテナーを作成) としてロードします。Firefox はこのように動作せず、レイアウトを作成する前に画像のサイズを知るのを待ちます。

この助けを願っています！

于 2012-11-02T02:48:16.847 に答える
0

#isotophecontainer持っていoverflow: hiddenます。これを削除すると、Chrome ですべての画像が表示されます。

于 2012-11-02T03:00:32.203 に答える