调整窗口大小时同位素网格布局失败

Question

我的网站上同位素存在问题。 我以为我解决了所有问题，但是现在调整窗口大小时仍然存在问题。 调整窗口大小后，整个网格将在页面上向下移动。 当窗口大小更改时，无法通过重新执行布局来解决此问题。 触发.isotope（'layout'）始终会将整个网格移动到页面底部。 我的代码还实现了无限滚动，这就是为什么我在hiddenelem的子代中拥有这一部分的原因。 我也在使用bootstrap btw。

代码的（重要）部分：

  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

在Bootstrap中，我从未设置静态宽度：

    masonry: {
    columnWidth: 255,
    gutter: 30
}

只是项目的类别：

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

当您使用Bootstrap时，最好使用bootstrap的类。

Answer 2

问题在于我们没有使用网格项目的直接容器作为向其施加同位素的元素。