jquery砌体在chrome / safari中打破（堆叠图像）但仅在第一次加载时
似乎当我尝试加载页面时，所有图像都堆叠在一起。 但是如果你点击链接将你带到同一个页面（比如主页链接），那么砌体就会开始。所以我认为砌体加载太早，就像jquery准备页面之前一样。
在这里我的jquery调用：
$(document).ready(function(){ $('#image_roll_container').masonry({ itemSelector: '.box' }); .... 这是有问题的页面：
http://ratattoos.com/
它在firefox和IE8中运行得很好。
我通过以下调整设法解决了这个问题：
看起来我需要一个名为imagesLoaded的插件，以便Monsry脚本能够正常使用chrome和safari
试过在这个post中建议的一切，什么都没有用，然后发现这个：
$(window).load(function(){ $('#content').masonry(); });
现在工作正常，在这里找到它： https ： //github.com/desandro/masonry/issues/35
原作者： https ： //github.com/desandro
你对imagesLoaded是正确的。 它在Firefox中运行良好，但在Chrome / Safari中堆叠。
这是链接http://masonry.desandro.com/demos/images.html
码：
var $container = $('#container'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.box' }); });
我最近遇到过这个问题。 为了解决这个问题，我使用了img width和height属性。 这个问题解决了。
另一种方法，如果你知道图像高度，是在加载Masonry之前在CSS中分配它们，那么布局比等待图像更快。 例如，如果所有图像的大小相同，则此方法有效。 然后，您的网站仍会在移动等慢速连接上快速加载。
我在这里发布了一些替代方法的脚本：
http://instancia.net/loading-jquery-masonry-on-mobile/
如果您使用此脚本，请编辑数字以匹配您的数字。
在Firefox和我的iPad 2上，砌体工作正常，但在OS X上的chrome和safari中，元素在页面加载时重叠/堆叠，直到窗口resize甚至发生。 在挖掘了jquery.masonry.js的代码之后，我发现我可以在创建砌体之后立即触发resize（），以便所有元素都能正确重新排列。 现在一切正常。
jQuery(document).ready(function(){ var $container = $('#container'); $container.imagesLoaded(function(){ $container.masonry({ itemsSelector: '.thumbnail', isFitWidth: true }).resize(); }); })
所有其他解决方案:(窗口）.load，设置CSS和img属性的宽度和高度等，对我来说不起作用。
Jennifer说，这些浏览器需要高度才能正确显示。 我使用php的getimagesize（）函数来获取图像的高度和宽度。 现在工作得很好。
如果使用$（’img’）。load（function（）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); } });
... ... ....
“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++; }); });
我遇到了如上所述的相反问题：首先在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
因为我没有时间跟踪可能受此bug影响的每个浏览器版本，所以我为所有浏览器切换到后一种方法。