Semantic UI visibility + Masonry infinite scroll layout

Question

I'm trying to create an infinite scrolling Masonry layout in the Semantic UI framework, using the built-in visibility function.

Everything seems to be working except getting Masonry to re-layout everything once new items are added.

I've made a jsfiddle: https://jsfiddle.net/erland/pdb5j09o/

As far as I can tell from the Masonry docs, all I should have to do is call $grid.masonry('layout'); after adding the new item, right?

What am I missing here? Should I not be using imagesLoaded in combo? Should I be working in Masonry's append instead?

Thanks in advance!

Answer 1

OK, the answer is pretty obvious, I basically answered myself at the end of the question - you need to be using the Masonry append function instead of layout:

$masonrygrid.append( $content )
.masonry( 'appended', $content );

New fiddle showing it working: https://jsfiddle.net/erland/jv0o6pue/

But now that I've sorted that out, what's the best way to add a whole row (ie. 4 x $content) on each visibility trigger?