web-dev-qa-db-ja.com

Masonry JS重複アイテム

ここに非常に奇妙な問題があります：[削除された参照リンク]。最初の行の商品アイテムは、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ルールはありますか？

jquerycssjquery-masonry
22
Jed

問題は画像です。石積みが呼び出されるまでに、画像は読み込まれていません。そのため、要素の高さは、考慮される画像の高さなしで想定されています。

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

四 5つのオプション：

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

すべての画像が読み込まれたら、Masonryを開始する必要があります。 jQueryを使用している場合：

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

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

13
Zbigniew Ledwoń

Document.readyをjQuery（window）.on（ 'load'、function（）{に置き換えた後、ソリューションが機能することに感謝します。

5
ziaprog

この問題はsettimeout関数で解決しました。 （ダウンロードする画像の＃とファイルサイズに応じて）2秒程度経過することで、最初に画像をダウンロードしてから石積みを適用できます。

                $(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
                });                         
            }
2
Jeff Shain

CSSを使用して画像の最小の高さを追加します。これで問題が解決します。

.image{ min-height: 250px; }
1
Sahan

ImagesLoadedライブラリを使用します。これは、各イメージがロードされるときにブロックを再編成するために特別に作成されています。

以下からダウンロードできます。

https://github.com/desandro/imagesloaded

1
Carlos Angulo

ウィンドウのロード後に石積みをロードするとうまくいきます。

jQuery(window).on('load', function(){
    //masonry init and options
    // .. codes
}
0
sybozz