Infinite scroll wordpress plugin not working with masonry. images overlapping

I am having a hard problem getting infinite scroll to work with masonry. The new images double up when infinite scroll takes effect. I have looked through the forums and tried using different callbacks but none seem to be working. I am building my site through wordpress using woocommerce. The products are displayed in Masonry format that I am trying to add infinite scroll to. I have made the Masonry responsive using % for the product widths which made the jquery I used for Masonry a little messy which might be adding to the difficulty of getting masonry to work. Below is my jquery for the masonry + the css im using and the selectors I used in the Infinite Scroll plugin setting panel.

jQuery(document).ready(function($) {
var $container = $('ul.products'); 
var Width = $(window).width(); 
var eight = $(window).height(); 

$container.imagesLoaded( function(){
   $('ul.products').fadeIn('slow');
   $('.woo-pagination').fadeIn();   
   $('.artist_description').fadeIn();
   $('.loading').delay(500).fadeOut(1500);
  /* $(".woocommerce-message").fadeOut(2100);*/

$container.masonry({
itemSelector: 'li.product',
animationEngine: 'best-available',
isAnimated : true,
animationOptions: {
   duration: 350,
   easing: 'linear',
   queue: true   
                  },
resizable: true,
masonry: { columnWidth: $container.width()}
});
$(window).smartresize(function(){   
$container.masonry({
// update columnWidth to a percentage of container width
masonry: { columnWidth: $container.width()}
});
});
$(window).smartresize();
})
})

css

ul.products {
clear: both;
width: 101%;
display: none;
}
 ul.products li.product {
float: left;
width: 19.95%;
margin-bottom: 0px !important;
}

Infinite Plugin setting screen

Content Selector : ul.products
Navigation Selector : .Woo-pagination
Next Selector : .next
Item Selector : li.product

In the callback box in the infinite scroll plugin setting page I have tried

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 );
    });

If anyone could help me figure this out it would be a huge help. Please be as specific as possible because I am still learning jquery and sometimes do not understand where everything should be added or placed. Also if you have any suggestions on the code for the masonry setup or if there is anything that I dont need in it please let me know.

you can check out the site at artadikt.com, I turned off debug so that it is easier to see the code.