0

我正在使用 Masonry 和 Infinite Scroll 插件进行布局。我需要将 ImagesLoaded 插件添加到 Masonry，但是当我这样做时，它似乎禁用了无限滚动功能。当我将 ImagesLoaded 函数添加到 Masonry 代码时，无限滚动插件不起作用。如果我将它从最初的 Masonry 代码中取出并将其保留在回调中，它将起作用..

任何想法为什么 InfiniteScroll 插件不会启动？提前致谢。

--

在这个 javascript 代码之前，我有一个 .js 文件，其中包含 ImagesLoaded、Masonry 和 Infinite Scroll 插件 - 按此顺序。

   $(function(){

        var $container = $('#container'); 
            // When I add this ImagesLoaded function to the masonry block the infinite scroll plugin doesn't work
        $container.imagesLoaded(function(){
          $container.masonry({
            columnWidth: '.grid',
            gutterWidth:0, 
            isAnimated : true,
            resizeable: true,
            itemSelector : '.grid'
          });
        });
            // End conflicting code
        $container.infinitescroll({
          navSelector  : 'div.pagination', 
          nextSelector : 'div.pagination a.older',
          itemSelector : '.grid',
          loading: {
            finishedMsg: "End of the line!",

            msgText: "<em class='loading'>Loading...</em>"
         },
                animate      : true, 
                extraScrollPx:150, 
                extractLink: true,

            pathParse: function() {
                return ['{path=site/index}/P','']
            },
            debug: true,
            errorCallback: function() {  
            // fade out the error message after 2 seconds
            $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   
            }
            },
          // trigger Masonry as a callback
          function( newElements ) {
            // hide new items while they are loading
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
              // show elems now they're ready
              $newElems.animate({ opacity: 1 });
              $container.masonry( 'appended', $newElems, true );
            });
          }
        );
      });

我用于 ImageLoaded 插件的代码：

// modified by yiannis chatzikonstantinou.

// original:
// mit license. paul irish. 2010.
// webkit fix from Oren Solomianik. thx!

$.fn.imagesLoaded = function( callback ){
  var elems = this.find( 'img' ),
      elems_src = [],
      self = this,
      len = elems.length;

  if ( !elems.length ) {
    callback.call( this );
    return this;
  }

  elems.one('load error', function() {
    if ( --len === 0 ) {
      // Rinse and repeat.
      len = elems.length;
      elems.one( 'load error', function() {
        if ( --len === 0 ) {
          callback.call( self );
        }
      }).each(function() {
        this.src = elems_src.shift();
      });
    }
  }).each(function() {
    elems_src.push( this.src );
    // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
    // data uri bypasses webkit log warning (thx doug jones)
    this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
  });

  return this;
};
4

1 回答 1

0

最终为我自己的问题找到了答案。

您需要在 ImagesLoaded 函数之前初始化 Masonry。虽然这在加载时产生了一些奇怪的排序，所以我在指定的时间后淡化了容器元素。

编码：

        var $container = $('#container').masonry(); 
        var $container = $('#container' ).css({ opacity: 0 });

        $container.imagesLoaded(function(){
          $container.delay(1000).animate({ opacity: 1 });
          $container.masonry({
            columnWidth: '.grid',
            gutterWidth:0, 
            isAnimated : true,
            resizeable: true,
            itemSelector : '.grid'
          });
        });
于 2013-10-26T01:23:46.957 回答