22

ここで非常に奇妙な問題があります: [参照リンクが削除されました] . 1 行目の製品アイテムが 2 行目のアイテムと重なっています。

石積みの項目は、フッターの上のホームページの下にあります。ご覧のとおり、Chrome では見た目が異なります。Firefoxでは、見栄えがします。

これが私のクロムでどのように見えるかです：http://clip2net.com/s/5LIRko

私のjQueryコードは次のとおりです。

jQuery(function($){
var $container = $('.woocommerce ul.products');
    $container.masonry({
          columnWidth:10, 
          gutterWidth: 15,
          itemSelector: '.product-category'
    });
});

行出力に影響する CSS ルールはありますか?

4

7 に答える 7

68

問題はあなたのイメージです。石積みが呼び出されるまでに、画像は読み込まれていません。したがって、画像の高さを考慮せずに要素の高さを想定しています。

画像が既にキャッシュされた後に画面を更新すると、画像が正しく読み込まれることがわかります。その後、キャッシュをクリアして更新すると、それらが再び重複していることがわかります。

4 つの 5 つのオプション:

  • 画像の読み込みが完了するまで待ちます (たとえば、特定の div 内のすべての画像が読み込まれるまで待つことができるプラグインがあります)。
  • ready イベントの代わりに load イベントを待ちます。使用する代わりに使用jQuery(function($){するjQuery(window).on('load', function(){ var $ = jQuery;と、結果が表示されます。
  • 画像の読み込み後に石積みを再適用します (これは好きではありません... ちらつきが見られます)
  • 私のお気に入り、ここでは石積みを使わないでください！ページで JS を無効にして、レイアウトを確認します。それはあなたが望むものです。すべての div は高さと幅が同じです。ここで石積みを使用する理由は特にありません。要素をフロートさせ、グリッドに自然に表示させるだけです。
  • 編集：別のオプション。高さがロードする画像に依存しないように、div の高さを指定します。
于 2013-09-17T12:07:47.763 に答える
14

すべての画像がロードされた後、Masonry を開始する必要があります。jQuery を使用している場合は、次を試してください。

var $container = $('#container');
// initialize Masonry after all images have loaded  
$container.imagesLoaded( function() {
  $container.masonry();
});

その他のオプションについては、メーソンリーのドキュメントを参照してください - http://masonry.desandro.com/layout.html#imagesloaded

于 2014-10-16T15:54:34.343 に答える
2

settimeout 関数でこの問題を解決しました。(ダウンロードする画像の # とファイルサイズに応じて) 1 秒ほど待つことで、最初に画像をダウンロードしてから石積みを適用できます。

                $(document).ready(function(){                                                                                                                   
                setTimeout(function() { masonry_go();masonry_go2();}, 1000);                                                                    
            });     
            $(window).resize(function() 
            {
                // jQuery
                $('.grid').masonry( 'destroy')
                $('.grid2').masonry( 'destroy')                 
                setTimeout(function() { masonry_go();masonry_go2();}, 1000);                                                                    
            });                 
            function masonry_go(){
                $('.grid').masonry({
                  // options
                  itemSelector: '.grid-item',
                  columnWidth: 300
                });                         
            }       
            function masonry_go2(){
                $('.grid2').masonry({
                  // options
                  itemSelector: '.grid-item2',
                  gutter: 15,
                  columnWidth: 200
                });                         
            }
于 2015-11-06T21:12:18.200 に答える
-1

$(window).on('load',function(){ });

$(window).on('load',function(){
//code
});

//use load event instead of document.ready starting of jquery

于 2020-05-03T16:35:09.860 に答える