jQuery Masonry ломается (стеки изображений) в chrome / safari, но только при первой загрузке

мне удалось исправить эту проблему со следующей настройкой:

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

пробовал все, что предлагалось в этой теме, ничего не работало, затем нашел это:

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

отлично работает сейчас, нашел его здесь: https://github.com/desandro/masonry/issues/35

автор оригинального поста: https://github.com/desandro

вы правы относительно загруженных изображений. Он отлично работал в Firefox, но укладывался в Chrome / Safari.

вот ссылка http://masonry.desandro.com/demos/images.html

код:

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

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

недавно я столкнулся с этой проблемой. Чтобы исправить это, я использовал атрибуты img width и height. Вопрос решился сам собой.

другой способ, если вы знаете высоты изображения, - назначить их в CSS перед загрузкой кладки, тогда макет быстрее, чем ждать изображений. Этот метод работает, если, например, все изображения имеют одинаковый размер. Тогда ваш сайт по-прежнему будет быстро загружаться на медленных соединениях, таких как мобильные.

Я опубликовал немного скрипта для альтернативного метода здесь:
http://instancia.net/loading-jquery-masonry-on-mobile/

Если вы используете этот скрипт, отредактируйте номера, чтобы они соответствовали вашим.

в Firefox и на моем iPad 2 masonry работал нормально, но в chrome и safari на OS X элементы перекрывались/укладывались при загрузке страницы и до тех пор, пока не произойдет изменение размера окна. После копания в коде jquery.каменная кладка.js я обнаружил, что могу вызвать resize() сразу после создания кладки, чтобы все элементы правильно переставлялись. Теперь все работает нормально.

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

все остальные решения: (окно).загрузка, установка ширины и высоты в CSS и на img атрибуты и т. д. просто не работали для меня.

ему нужны высоты в этих браузерах для правильного отображения, как сказала Дженнифер. Я использую функцию getimagesize () php для получения высоты и ширины изображений. Теперь работает отлично.

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

если использовать $('img').load (function() F5 (refesh) = > error

Новые Методы:

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

событие "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

поскольку у меня нет времени отслеживать каждую версию браузера, которая может быть затронута этой ошибкой, я переключился на последний метод для всех браузеров.