问题
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