jquery砌体在chrome / safari中打破（堆叠图像）但仅在第一次加载时

It seems that when I try to load the page, all the images are stacked on top of one another. But if you were to click a link which takes you to the same page (like the home link) then masonry kicks in. So I think masonry is loading too early, like before jquery readies the page or something.

似乎当我尝试加载页面时,所有图像都堆叠在一起。但是如果你点击链接将你带到同一个页面(比如主页链接),那么砌体就会开始。所以我认为砌体加载太早,就像jquery准备页面之前一样。

Here my jquery call:

在这里我的jquery调用:

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

....

Here's the page in question:

这是有问题的页面:

http://ratattoos.com/

it works just fine in firefox and IE8.

它在firefox和IE8中运行得很好。

12 个解决方案

#1

I've managed to fix this problem with the following tweak:

我通过以下调整设法解决了这个问题:

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

#2

looks like I needed a plugin called imagesLoaded in order for the Monsry script to work properly with the likes of chrome and safari

看起来我需要一个名为imagesLoaded的插件,以便Monsry脚本能够正常使用chrome和safari

#3

Tried everything suggested in this thread, nothing worked, then found this:

试过在这个帖子中建议的一切,什么都没有用,然后发现这个:

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

Works fine now, found it here: https://github.com/desandro/masonry/issues/35

现在工作正常,在这里找到它:https://github.com/desandro/masonry/issues/35

Original post author: https://github.com/desandro

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

#4

You are correct about the imagesLoaded. It was working fine in Firefox but stacking in Chrome/Safari.

你对imagesLoaded是正确的。它在Firefox中运行良好,但在Chrome / Safari中堆叠。

Here is the link http://masonry.desandro.com/demos/images.html

这是链接http://masonry.desandro.com/demos/images.html

Code:

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

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

#5

I recently came across this issue. To fix it, I utilized the img width and height attributes. The issue resolved itself.

我最近遇到过这个问题。为了解决这个问题,我使用了img width和height属性。这个问题解决了。

#6

Another way, if you know the image heights, is to assign them in the CSS before you load Masonry, then the layout is faster than waiting for the images. This method works if, for example, all your images are the same size. Then your site will still load quickly on slow connections, like mobile.

另一种方法,如果你知道图像高度,是在加载Masonry之前在CSS中分配它们,那么布局比等待图像更快。例如,如果所有图像的大小相同,则此方法有效。然后,您的网站仍会在移动等慢速连接上快速加载。

I posted a bit of script for alternative method here:
http://instancia.net/loading-jquery-masonry-on-mobile/

我在这里发布了一些替代方法的脚本:http://instancia.net/loading-jquery-masonry-on-mobile/

If you use this script, edit the numbers to match yours.

如果您使用此脚本,请编辑数字以匹配您的数字。

#7

On Firefox and on my iPad 2 masonry was working fine but in chrome and safari on OS X the elements were overlapping/stacking on page load and until a window resize even happen. After digging in the code of jquery.masonry.js I found that I can trigger a resize() right after creating the masonry so that all elements rearrange properly. Now everything is working fine.

在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();
}); 
})

all of the other solutions: (window).load, setting width & height in CSS and on img attributes, etc, just didn't work for me.

所有其他解决方案:(窗口).load,设置CSS和img属性的宽度和高度等,对我来说不起作用。

#8

It needs heights in these browsers to display correctly like Jennifer said. I use php's getimagesize() function to get the height and width of the images. Works perfectly now.

Jennifer说,这些浏览器需要高度才能正确显示。我使用php的getimagesize()函数来获取图像的高度和宽度。现在工作得很好。

#9

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

#10

if use $('img').load(function() F5(refesh) => error

如果使用$('img')。load(function()F5(refesh)=>错误

New Methods:

$(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>

#11

The "load" event will trigger for every image in the DOM, this is overkill. You need to update the layout of the masonry when the last image in the DOM loads. Here is the code:

“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++;
    });
});

#12

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.

我遇到了如上所述的相反问题:首先在Mac OS X Safari中加载工作正常,但是使用所有新项目更改网格会导致它们全部堆叠在左上角。此外,等待就绪事件并在我们的元素上设置CSS高度和宽度并没有解决它。

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:

在我们的网站上,我们有在砖石网格中显示的数据类别,并且一次只显示一个类别。用户可以随时切换类别并触发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

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

但是,在某些版本的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

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.

因为我没有时间跟踪可能受此bug影响的每个浏览器版本,所以我为所有浏览器切换到后一种方法。