14

ページを読み込もうとすると、すべての画像が重なり合っているようです。しかし、同じページに移動するリンク (ホーム リンクなど) をクリックすると、Masonry が作動します。

ここで私のjquery呼び出し：

$(document).ready(function(){
    $('#image_roll_container').masonry({
        itemSelector: '.box'
    });

....

問題のページは次のとおりです。

http://ratattoos.com/

Firefox と IE8 では問題なく動作します。

4

12 に答える 12

20

次の調整でこの問題を解決できました。

<script type="text/javascript">
    $(document).ready(function(){
        $('img').load(function(){
            $(".content_photo").masonry();
        });
        $(".content_photo").masonry();
    });
</script>
于 2012-02-10T21:34:45.893 に答える
11

Monsryスクリプトがchromeやsafariなどで正しく動作するためには、imagesLoadedというプラグインが必要だったようです。

于 2011-10-01T16:37:07.820 に答える
8

このスレッドで提案されているすべてを試してみましたが、何も機能せず、次のことがわかりました。

$(window).load(function(){   $('#content').masonry(); });

ここで見つけました: https://github.com/desandro/masonry/issues/35

元の投稿者: https://github.com/desandro

于 2013-04-22T19:50:35.833 に答える
5

imagesLoadedについては正しいです。Firefox では問題なく動作していましたが、Chrome/Safari ではスタックしていました。

ここにリンクがあります https://masonry.desandro.com/layout.html#imagesloaded

コード：

var $container = $('#container');

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.box'
  });
});
于 2012-03-26T14:07:51.597 に答える
1

最近、この問題に遭遇しました。それを修正するために、img の幅と高さの属性を利用しました。問題は解決しました。

于 2012-10-04T19:33:45.507 に答える
0

Firefox と私の iPad 2 では、石積みは正常に機能していましたが、OS X のクロムとサファリでは、要素がページの読み込み時に重なり合ったり、ウィンドウのサイズ変更が発生するまでスタックしたりしていました。jquery.masonry.js のコードを掘り下げた後、すべての要素が適切に再配置されるように、石積みを作成した直後に resize() をトリガーできることがわかりました。現在、すべてが正常に機能しています。

jQuery(document).ready(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
    $container.masonry({
    itemsSelector: '.thumbnail',
    isFitWidth: true
    }).resize();
}); 
})

他のすべてのソリューション: (window).load、CSS および img 属性での幅と高さの設定などは、私にとってはうまくいきませんでした。

于 2013-03-24T23:04:06.710 に答える
0

$('img').load(function() F5(refresh) => エラーを使用する場合

新しい方法:

$(window).on('load resize', function() {
  if ($('.masonry-wrap').length) {
    $('.masonry-wrap')
    .css('max-width', $(window).width());
  }
});
$(window).on('load', function() {
  if ($('.masonry-wrap').length) {
    setTimeout(function() {
      $('.masonry').masonry({
        columnWidth: 0,
        itemSelector: '.grid-item'
      });
    }, 1);
  }
});
<div class="masonry-wrap">
  <div class="masonry">
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
    ....
  </div>
</div>

于 2015-01-31T19:27:17.767 に答える
0

「load」イベントは DOM 内のすべての画像に対してトリガーされますが、これはやり過ぎです。DOM の最後の画像が読み込まれたときに、石積みのレイアウトを更新する必要があります。コードは次のとおりです。

$(document).ready(function(){
    // init the masonry on document ready event;
    // at this point the images are not loaded so the layout will break UNLESS you set up the correct values for the "width" and "height" attributes of the img tags
    $('.content_photo').masonry();

    // to make sure the layout will not break apart we update the masonry layout just after the last image from the DOM was loaded
    var total_images = $('img').length;
    var counter = 1;
    $('img').load(function() {
        if(counter == total_images) {
            alert('the last image in the DOM was loaded. now we can update the masonry layout');
            $('.content_photo').masonry('layout');
        }
        counter++;
    });
});
于 2016-04-07T11:13:59.217 に答える
0

別の方法として、画像の高さがわかっている場合は、Masonry をロードする前に CSS で高さを割り当てると、画像を待つよりもレイアウトが速くなります。この方法は、たとえば、すべての画像が同じサイズである場合に機能します。そうすれば、モバイルなどの低速接続でもサイトがすばやく読み込まれます。

ここに別の方法のスクリプトを少し投稿しました：
http://instancia.net/loading-jquery-masonry-on-mobile/

このスクリプトを使用する場合は、番号を編集して自分のものに合わせてください。

于 2013-01-26T20:04:28.707 に答える
0

I had the reverse problem as described: first load worked fine in Mac OS X Safari, but changing the grid with all new items caused them all to stack in the top left corner. Further, waiting for ready event and setting CSS height & width on our elements didn't fix it.

On our site, we have categories of data that display in the masonry grid, and only one category shows at a time. A user could switch the category at any time and trigger an AJAX request to load in the new data. In latest Safari (9.1, 10) and browsers like Chrome, we could simply do this when changing the category to swap in all new elements:

    // domData is HTML string from the server
    // IMJS is our global variable that we use for globals and lookups
    $("#divTemplateCategoryName").after(domData); // insert new HTML
    var elementsToAdd = $(".grid-item-template-info"); //select the elements
    IMJS.MasonryGrid.masonry('addItems', elementsToAdd); // tell masonry to add them
    IMJS.MasonryGrid.masonry('layout'); // tell masonry to layout again

However, in some versions of Safari that wouldn't work, and we had to do this instead:

    // domData is HTML string from the server
    // IMJS is our global variable that we use for globals and lookups
    IMJS.MasonryGrid.masonry('destroy'); // destroy the grid
    $("#divTemplateCategoryName").after(domData); // insert new HTML
    InitMasonry(); // re-do our entire masonry init

Because I don't have the time to track down every browser version that might be affected by this bug, I switched to the latter method for all browsers.

于 2016-08-22T17:14:32.497 に答える
0 
<script>
        var container = document.querySelector('#masonry');
        var msnry = new Masonry( container, {
            itemSelector: '.item',
            "columnWidth": 200,
        });
        $('.item img').load(function(){
                var msnry = new Masonry( container, {
                itemSelector: '.item',
                "columnWidth": 200,
            });
        })
</script>
于 2013-11-13T08:41:36.700 に答える