无法让 jQuery Masonry + Infinite Scroll 在 Safari 和 Chrome 中工作答案

【问题标题】：Can't get jQuery Masonry + Infinite Scroll to work in Safari and Chrome无法让 jQuery Masonry + Infinite Scroll 在 Safari 和 Chrome 中工作
【发布时间】：2011-07-16 12:23:57
【问题描述】：

您好，我正在尝试使用 jQuery Masonry 和 Infinite scroll 设置网站，但我似乎无法让它在 OSX 上的 Chrome 或 Safari 中运行。

开发网站是http://bit.ly/hYJ3Cq

我在控制台中没有收到任何 javascript 错误。

我尝试过的事情：

在砌体 div 中设置图像宽度/高度
使用旧的 jquery 库
将 js 移动到头部而不是页脚
将 type="text/javascript" 添加到脚本标签
验证 html
在 jQuery(window).load( 和 jQuery(document).ready( ) 之间切换

这是我正在使用的代码，它与运行良好的演示代码非常相似：

    jQuery(window).load(function(){

    jQuery('.hfeed').masonry({
        singleMode: true, 
        itemSelector: '.box'
    });

    jQuery('.hfeed').infinitescroll({
      navSelector  : '.pagination',  // selector for the paged navigation 
      nextSelector : '.pagination .next',  // selector for the NEXT link (to page 2)
      itemSelector : '.box',     // selector for all items you'll retrieve
      loadingImg : '/wp-content/themes/sprppl/images/loader.gif',
      loadingText  : "Loading...",
      donetext  : 'No more pages to load.',
      debug: false,
      errorCallback: function() { jQuery('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   }
      },
      // call masonry as a callback
      function( newElements ) { jQuery(this).masonry({ appendedContent: jQuery( newElements ) }); }
    );      

    });

任何帮助将不胜感激。

【问题讨论】：

标签： jquery jquery-masonry infinite-scroll

【解决方案1】：

http://desandro.com/demo/masonry/docs/infinite-scroll.html

查看“Tumblr 问题”。您应该设置图像大小标签（在<img/> 而不是<div/>）或使用 setTimeout()

// call masonry as a callback, after 1000 milliseconds
function( newElements ) {
  setTimeout(function() {
    $wall.masonry({ appendedContent: $(newElements) });
  }, 1000);
}

我猜你也应该设置一个 columnWidth（我不知道脚本，但这就是他们在文档中所说的）

【讨论】：