Infinite scroll with masonry in woocommerce not working

I’m facing a nasty problem with integrating the infinite scroll plugin in WordPress with the theme that is using masonry.

I have the latest version of infinite scroll, 2.6.2, and I have added this code in the callback section of the plugin:

// hide new items while they are loading
var $newElems = jQuery(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 );
});

but it’s not working, it adds the opacity to the new elements but it’s not adding the positions,etc, so not quite working; the new items are going on the top of the page over the old products.

Script looks like:

/* <![CDATA[ /
var infinite_scroll = "{"loading":{"msgText":"Loading...<\/em>","finishedMsg":"No additional products.<\/em>","img":"http:\/\/www.test.com\/wp-content\/plugins\/infinite-scroll\/img\/ajax-loader.gif"},"nextSelector":".next","navSelector":".woo-pagination","itemSelector":"li.product","contentSelector":"ul.products","debug":false,"behavior":"","callback":"\/\/ hide new items while they are loadingrnvar $newElems = jQuery(newElements).css({ opacity: 0 });rn\/\/ ensure that images load before adding to masonry layoutrn$newElems.imagesLoaded(function(){rn\/\/ show elems now they're readyrn$newElems.animate({ opacity: 1 });rn$container.masonry( 'appended', $newElems, true );rn});"}";
/ ]]> */

the masonry looks like:

// Only fire masonry if the window is an appropriate size and images are loaded
jQuery(function(){
    var $container = jQuery('ul.products');
    $container.imagesLoaded( function(){
        if (jQuery(window).width() > 767) {
            $container.masonry({
                itemSelector : 'li.product',
                columnWidth : 295,
                isFitWidth: true,
                gutterWidth : 2
            });
        }
    });
});