jQuery Masonry错误的顶级位置

elb*_*ron 6 resize position jquery-masonry twitter-bootstrap

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

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

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

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

我的砌体脚本:

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

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

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

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

小智 18

请阅读http://masonry.desandro.com/docs/help.html上的帮助部分

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

$(window).load(function(){
  $('#container').masonry({
    // options...
  });
});
Run Code Online (Sandbox Code Playgroud)

  • 这是正确的答案,但现在(2020 年:)jquery 中的 `load` 写成 `.on("load", function(){ ...`:https://api.jquery.com/load-event / (2认同)