1

編集:ウィンドウのサイズが変更されているときに、スクリプトがトリガーされ、正しく実行されます。どうもありがとうСърГеоргиДемирев！

私は長い間問題について熟考してきましたが、それを把握することができないようです. 写真ポートフォリオ サイトでは、iDangero.us Swiper をスライドショーに、JQuery Isotope をサムネイル ギャラリーに使用しています。

現在、Linux と Windows 7 の Firefox と Chrome で問題なく動作します。

ただし、IE、Safari、および Opera では、グリッド項目はグリッドではなく垂直線で表示されます。

エラーを見つけるために、コードの Swiper 部分を削除すると Isotope がこの動作を停止することがわかるまで、すべてのコードを削除しました。

親 div の高さは 0 ピクセルです。これらを固定の高さ (1000px または 100% など) に変更しても、何も変わりません。

編集: これは Сър Георги Демирев の提案の実装です:

現在は機能していますが、グリッド アイテムの後の右マージンはなくなり、ウィンドウのサイズ変更後にのみ戻ります。しかし、もう一歩。

私はどんな提案にもとても感謝しています、私はこれについて全く無知です...

ここに画像の説明を入力

4

1 に答える 1

2

最近、同様の問題が発生しました。画像が積み重ねられているという事実は、おそらくスクリプトがロードされていないことを意味します。ただし、ブラウザー ウィンドウのサイズを少し変更すると、スクリプトがトリガーされ、画像が本来の位置に配置されます。

このコードをラップします

imagesLoaded( '#thumbnailgallery', function(){
    var $container = $('#thumbnailgallery');

      $container.isotope({
        itemSelector: '.element',
        layoutMode: 'masonry',
        masonryHorizontal: {
        columnWidth: 240,
        rowHeight: 240,
        gutterwidth: 50},
      });
    });

in (document).ready 関数は次のようになります。

$(document).ready(function () {

    imagesLoaded( '#thumbnailgallery', function(){
    var $container = $('#thumbnailgallery');

      $container.isotope({
        itemSelector: '.element',
        layoutMode: 'masonry',
        masonryHorizontal: {
        columnWidth: 240,
        rowHeight: 240,
        gutterwidth: 50},
      });
    });

});
于 2014-03-21T13:45:40.780 に答える