To explain the situation:
I use both masonry.js and jscroll.js (infinite scrolling) on this particular board.
http://lifeto.cafe24.com/xe/request
and as you can see, the situation is that, the first 20 lists of the board are presented under masonry.js perfectly neat and fine, but it's those lists that are added by the jscroll.js later to the dom that don't work with masonry.js
So, I tried to run masonry.js as a call back function of the jscroll.js so that when I scroll through, the contents are loaded with the masonry.js but unfortunately, it doesn't seem to work.
Here is the complete js script.
/* infinite scroll */
jQuery(document).ready(function() {
jQuery('.board_content').jscroll({
loadingHtml: '<div class="loading_div"><center><img src="layouts/wb10/ajax-loader4.gif" alt="Loading" /></center></div>',
padding: 0,
contentSelector: '.board_list',
autoTriggerUntil: 30,
nextSelector: '.next_button',
callback: function() {
var container = document.querySelector('.masonry');
var msnry = new Masonry(container, {
columnWidth: 0,
itemSelector: '.item'
});
var $grid = jQuery('.item').imagesLoaded(function() {
// init Masonry after all images have loaded
$grid.masonry({
// options...
});
});
jQuery('.list_one').waypoint(function() {
jQuery('.list_one').addClass('animated fadeIn');
}, {
offset: '75%'
});
}
});
});
(function($) {
'use strict';
$(window).load(function() {
$('.masonry').masonry({
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer',
itemSelector: '.item'
});
});
}(jQuery));
Am I missing something?
Here is the live site: http://lifeto.cafe24.com/xe/request
$grid.append( $items ).masonry( 'appended', $items );
Check relevant DOC$grid = $('.masonry').masonry({ columnWidth: '.grid-sizer', gutter: '.gutter-sizer', itemSelector: '.item' });
Then when you want to append new elements, use$grid.append( $items ).masonry( 'appended', $items );
where $items are the new added elements. Oh but i see you are already using a variable$.grid
but looks like completly unrelevant to mansonry plugin in your code. That's sadi, your code is quite hard to read/follow... See relevant doc masonry.desandro.com/methods.html