jQuery的石工打破（堆棧圖像）在鉻/ Safari瀏覽器，但只在第一次加載

看來，當我嘗試加載頁面時，所有的圖像堆疊在一起。但是如果你點擊一個鏈接將你帶到同一頁面（比如home鏈接），那麼砌體就會啓動。所以我認爲砌體加載得太早了，就像在jquery準備完成頁面之前一樣。jQuery的石工打破（堆棧圖像）在鉻/ Safari瀏覽器，但只在第一次加載

這裏我jQuery的電話：

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

....

這裏是有問題的網頁：

http://ratattoos.com/

在Firefox和IE8工作得很好。

來源

2011-09-19 rugbert

請添加屏幕截圖 - 您的鏈接已損壞。 – opyate

看起來像我需要一個叫做imagesLoaded插件，以便使Monsry腳本與

來源

2011-10-01 16:37:07 rugbert

如何使用它？或用砌體初始化它？ –

$（'＃masonry'）。imagesLoaded（function（）{ //圖片已加載，您可以初始砌石 }）; –

我設法解決這個問題，下面的調整Chrome和Safari的喜歡正常工作：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('img').load(function(){ 
      $(".content_photo").masonry(); 
     }); 
     $(".content_photo").masonry(); 
    }); 
</script>

來源

2012-02-10 21:34:45 Kostyantyn

您對圖像已加載正確無誤。它在Firefox中工作正常，但在Chrome/Safari中堆疊。

這裏是http://masonry.desandro.com/demos/images.html

代碼的鏈接：

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

$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector : '.box' 
    }); 
});

來源

2012-03-26 14:07:51 coop

我最近碰到這個問題。爲了解決這個問題，我使用了img寬度和高度屬性。問題自行解決。

來源

2012-10-04 19:33:45 Chadimoglou

如果您知道圖像高度，另一種方法是在加載Masonry之前在CSS中分配它們，然後佈局比等待圖像更快。例如，如果所有圖像的大小相同，則此方法有效。那麼您的網站仍然會在移動設備等速度較慢的連接上快速加載。

我貼了一下腳本的替代方法在這裏：
http://instancia.net/loading-jquery-masonry-on-mobile/

如果使用這個腳本，編輯數字來匹配你的。

來源

2013-01-26 20:04:28

在Firefox和我的iPad 2上，磚石工作正常，但在OS X的Chrome和Safari上，元素在頁面加載時重疊/堆疊，直到窗口調整大小甚至發生。在挖掘了jquery.masonry.js的代碼後，我發現我可以在創建砌體之後立即觸發resize（），以便所有元素都能正確重新排列。現在一切正常。

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

所有其他解決方案：（窗口）.load，在CSS和IMG屬性等設定寬度&高度，只是沒有爲我工作。

來源

2013-03-24 23:04:06

嘗試一切在這個線程建議，沒有什麼工作，然後發現這一點：

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

工作正常現在，在這裏找到： https://github.com/desandro/masonry/issues/35

原帖作者： https://github.com/desandro

來源

2013-04-22 19:50:35 yodalr

它需要這些瀏覽器的高度才能像Jennifer所說的那樣正確顯示。我使用php的getimagesize（）函數來獲取圖像的高度和寬度。現在完美運作。

來源

2013-10-22 02:29:28

<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-13 08:41:36 hernandezmiguel

請只使用英文。 – wonko79

如果使用$（ 'IMG'）負載（函數（）F5（refesh）=>錯誤

新方法：

$(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-31 19:27:17

的「 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-07 11:13:59 PAdrian

我遇到了相反的問題，如下所述：第一次加載在Mac OS X Safari中運行正常，但是使用所有新項目更改網格導致它們都堆疊在左上角。此外，等待就緒事件並在我們的元素上設置CSS高度&寬度沒有解決它。

在我們的網站上，我們有在砌體網格中顯示的數據類別，並且一次只顯示一個類別。用戶可以隨時切換類別並觸發一個AJAX請求來加載新數據。在最新的Safari瀏覽器（9.1，10）和Chrome等瀏覽器，我們可以簡單地這樣做更改類別中的所有新元素交換時：

// 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

然而，在Safari的某些版本將無法正常工作，並我們不得不這樣做，而不是：

// 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

因爲我沒有追查可能受到此問題影響的每個瀏覽器版本的時候，我切換到所有瀏覽器後一種方法。

來源

2016-08-22 17:14:32

jQuery的石工打破（堆棧圖像）在鉻/ Safari瀏覽器，但只在第一次加載

回答

相關問題