How to enable infinite scrolling with masonry?

十年热恋 提交于 2020-01-05 10:07:10

问题


So how do I add or integrate infinite scrolling with my masonry fluid layout? I have already googled but don't understand.Here is what I got so far:

/**
 * Base js functions
 */

$(document).ready(function(){
    var $container = $('.container');

    var gutter = 20;
    var min_width = 270;
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.box',
            gutterWidth: gutter,
            isAnimated: true,
              columnWidth: function( containerWidth ) {
                var box_width = (((containerWidth - 2*gutter)/3) | 0) ;

                if (box_width < min_width) {
                    box_width = (((containerWidth - gutter)/2) | 0);
                }

                if (box_width < min_width) {
                    box_width = containerWidth;
                }

                $('.box').width(box_width);

                return box_width;
              }
        });
    });
});

Can someone help? Thank you so much!


回答1:


If you check out the source code for the infinite scroll example on the masonry site you can see the function that does all the work after the initial Masonry setup. After your $container.imagesLoaded function, add in the Infinite Scroll configs and then trigger Masonry in a callback function. Also, be sure to include jquery.infinitescroll.min.js after jquery.masonry.min.js.

Here's the JS from that page:

$(function(){

var $container = $('#container');

$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector: '.box',
    columnWidth: 100
  });
});

// Infinite Scroll
$container.infinitescroll({
  navSelector  : '#page-nav',    // selector for the paged navigation 
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'No more pages to load.',
      img: 'http://i.imgur.com/6RMhx.gif'
    }
  },
  // 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 ); 
    });
  }
);

});



来源:https://stackoverflow.com/questions/13537638/how-to-enable-infinite-scrolling-with-masonry

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!