Currently when I append new items to my masonry container they are added in the top left corner and then fly into position. However, in this example on the masonry website the new elements appear at the bottom.
It says in the demo description that the demo 'makes use of the IsAnimatedFromBottom flag', but looking at the code I can't see it:
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
columnWidth: 100
});
});
$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.开发者_StackOverflow社区imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements );
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
Also looking at the listed options it doesn't appear to be listed, so does anyone know how this is used?
Was having some trouble with this myself. I think you actually want to set the flag to true so instead of
.masonry( 'appended', $content, isAnimatedFromBottom )
you would want
.masonry( 'appended', $content, true)
Sorry, always the way, found the answer as soon as I posted! The flag isn't a config setting, but a parameter for the appended method
.masonry( 'appended', $content, isAnimatedFromBottom)
精彩评论