Изотопная сетка не работает при изменении размера окна

Question

У меня проблемы с изотопом на моем сайте. Я думал, что решил их все, но теперь все еще есть проблема при изменении размера окна. При изменении размера окна вся сетка перемещается вниз по странице. Это не исправлено путем повторного выполнения макета при изменении размера окна. Запуск.isotope('layout') всегда перемещает всю сетку вниз страницы. Мой код также реализует бесконечную прокрутку, поэтому у меня есть роль в детях скрытого элемента. Я также использую бутстрап кстати.

(Важная) часть кода:

  if (typeof g_Isotopegrid === 'undefined') {
                    g_Isotopegrid = $('.grid').isotope({
                            itemSelector: '.grid-item',
                            stamp: '.stamp',
                            masonry: {
                                columnWidth: 255,
                                gutter: 30
                            }
                        });                       
                }

              // Append all the hidden items to the visible items element
              hiddenElm.children().each(function () {
                var aItem = $(this);
                // Append the items to the visible div
                aItem.appendTo(visibleElm).imagesLoaded(function() {
                    g_Isotopegrid.isotope('appended', aItem);
                });

              });

Любая помощь приветствуется!

Answer 1

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

Answer 2

В Bootstrap я никогда не устанавливал статическую ширину:

    masonry: {
    columnWidth: 255,
    gutter: 30
}

просто класс предмета:

    masonry: {
    columnWidth: '.grid-item',
    gutter: 30
}

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