ページを読み込もうとすると、すべての画像が重ねて表示されるようです。しかし、同じページ（ホームリンクのようなもの）にリンクするリンクをクリックすると、石積みが始まります。そのため、jqueryがページを準備する前と同じように、石積みが早すぎると思います。jquery masonryはクロム/サファリでブレークします（最初の読み込み時のみ）
ここに私のjQueryのコール：
$(document).ready(function(){
$('#image_roll_container').masonry({
itemSelector: '.box'
});
....
ここでページが問題である：
それはFirefoxとIE8でうまく動作します。
私はMonsryスクリプトはChromeとSafariの
使い方は？またはそれをMasonryで初期化しますか？ –
$（ '＃masonry'）。imagesLoaded（function（）{ //画像がロードされていて、初期化メーソンリー }）; –
の同類で正しく動作するためにはimagesLoadedと呼ばれるプラグインを必要と同様に、私は次のよう微調整して、この問題を解決するために管理しているになります。
<script type="text/javascript">
$(document).ready(function(){
$('img').load(function(){
$(".content_photo").masonry();
});
$(".content_photo").masonry();
});
</script>
imagesLoadedについては正しいです。 Firefoxではうまくいきましたが、Chrome/Safariでスタッキングしていました。私は最近、この問題に出くわした
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.box'
});
});
：ここ
はリンクhttp://masonry.desandro.com/demos/images.html
コードです。それを修正するために、imgのwidth属性とheight属性を使用しました。問題は解決しました。
画像の高さが分かっている場合は、Masonryをロードする前に画像の高さをCSSに割り当てると、レイアウトが画像を待つよりも速くなります。このメソッドは、たとえば、すべての画像が同じサイズである場合に機能します。それでもあなたのサイトは、モバイルのような低速接続でもすぐに読み込まれます。
私はここに別の方法のためのスクリプトのビットを掲載：
http://instancia.net/loading-jquery-masonry-on-mobile/
をこのスクリプトを使用する場合は、あなたに合うように数字を編集します。
Firefoxと私のiPad 2では、masonryは正常に動作していましたが、OS Xのクロムとサファリでは、要素がページの読み込み時に重なり/積み重なり、ウィンドウのサイズが変更されるまで起こりました。 jquery.masonry.jsのコードを掘り下げた後、私は、すべての要素が適切に再配置されるように、石積みを作成した直後にresize（）をトリガーできることがわかりました。今はすべて正常に動作しています。
jQuery(document).ready(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemsSelector: '.thumbnail',
isFitWidth: true
}).resize();
});
})
他のソリューションのすべて：（ウィンドウ）.LOAD、ちょうど私のために動作しませんでした、など、CSSにとのimg属性に幅&高さを設定。
$(window).load(function(){ $('#content').masonry(); });
作品罰金が今、ここにそれを見つけた： https://github.com/desandro/masonry/issues/35
オリジナル投稿者：
しようとしたすべてのものは、これを見つけ、何も働いていない、このスレッドで提案 https://github.com/desandro
それジェニファーは言ったように、これらのブラウザで正しく表示する必要があります。私はphpのgetimagesize（）関数を使ってイメージの高さと幅を取得します。今は完璧に動作します。
<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>
英語のみを使用してください。 – 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>」 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++;
});
});
Mac OS X Safariでは最初の読み込みはうまくいきましたが、すべての新しい項目でグリッドを変更すると、それらのすべてが左上隅に積み重なりました。さらに、準備完了イベントを待ってCSSの高さを&の幅に設定しても問題は解決しませんでした。
私たちのサイトでは、メーソンリーグリッドに表示されるデータのカテゴリがあり、一度に1つのカテゴリのみが表示されます。ユーザはいつでもカテゴリを切り替えて、AJAXリクエストをトリガして新しいデータをロードすることができます。カテゴリを変更する場合、最新のSafari（9.1、10）やChromeなどのブラウザでは、我々は単純にすべての新しい要素にスワップするためにこれを行うことができます：動作しないのSafariの一部のバージョンでは、しかし
// 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
、および私たちは、代わりにこれをしなければならなかった：
// 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
私はこのバグの影響を受ける可能性があるすべてのブラウザのバージョンを追跡するための時間を持っていないので、私はすべてのブラウザのために後者の方法に切り替えます。
スクリーンショットを追加してください - リンクが壊れています。 – opyate