resize - jQuery Masonry 顶部位置错误

Question

我在特定页面上使用具有固定布局的 Twitter Bootstrap 和 jQuery Masonry。

它正在工作，但是从第二行开始，div 的顶部位置被错误计算，并且部分覆盖了第一行的元素。

看起来脚本在重新排列元素之前退出了。

奇怪的是，当我在 Chrome 中打开检查器或稍微调整视口大小时，div 会跳到正确的位置。刷新页面有时会有所帮助，有时不会...

我的砌体脚本：

jQuery(document).ready(function(){
    jQuery('.span9').masonry({
        itemSelector: '.span3',
        columnWidth: function( containerWidth ) {
        return containerWidth / 3;
        }
    });
});

这是正常行为吗？我应该添加window.resize到上面的脚本吗？

将砌体脚本放置在页面本身或页眉中，页脚不会改变它的行为。

我在 jQuery 之后调用 masonry.js，在任何其他 Bootstrap js 之前。

Answer 1

只需阅读此处的帮助部分http://masonry.desandro.com/docs/help.html

脚本在所有图像加载之前运行，您必须在加载窗口后触发它

$(window).load(function(){
  $('#container').masonry({
    // options...
  });
});