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

Question

我的站点中存在同位素问题。我以为我解决了所有问题，但现在在调整 window 大小时仍然存在问题。在调整 window 的大小时，整个网格在页面上向下移动。当 window 尺寸发生变化时，re-doing 布局并未修复此问题。触发 .isotope('layout') 总是将整个网格移动到页面底部。我的代码还实现了无限滚动，这就是为什么我在 hiddenelem 的 children 上有一部分。我也在使用 bootstrap 顺便说一句。

代码的（重要）部分：

  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
}

只是项目的 class:

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

当您使用 Bootstrap 时，项目宽度使用 bootstrap 的 class 更好。

Answer 2

问题是我们没有使用网格项目的直接容器作为应用同位素的元素。

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

Isotope grid layout fails on window resize

responsive-design

jquery-isotope