jQuery Waypoints + Masonry

Using: jQuery Waypoints and Masonry to create an infinite scrolled grid layout. Apart, they work fine. However, I can't figure out how to get them to work together.

Code for Waypoints

$(document).ready(function() {
var $loading = $(""),
$footer = $('footer'),
opts = {
    offset: '100%',
    continuous: 'true'
};


$footer.waypoint(function(event, direction) {
    $footer.waypoint('remove');
    $('body').append($loading);
    $.get($('.more a').attr('href'), function(data) {
        var $data = $(data);
        $('#containerd').append($data.find('.poster3'));
        $('.more').replaceWith($data.find('.more'));
        $footer.waypoint(opts);
    });
}, opts);
});

Code for Masonry (updated for animation 9/18/2011)

var $j = jQuery.noConflict();
$j(function(){
$j('#mason3').masonry({
itemSelector: '.poster3',
isAnimated: !Modernizr.csstransitions
});  
});

I've looked at the Masonry Infinite Scroll example, but I can't get Infinite Scroll to work on my page (which is why I used Waypoints to begin with).

The problem is that when the divs are loaded in with Waypoints, they don't properly align themselves into the grid via Masonry. On top of all of this, any rel= tags are negated on the loaded objects (also using a Tooltips script to create html tooltips.)

So basically, what I'm looking to do: [1] when the divs are loaded in via Waypoints, update grid layout with the newly loaded waypoints divs while keeping any data from said divs intact (firing properly) like the aforementioned tooltips problem. An example of the problem can be seen firsthand at http://regchan.org/ib/dev/. (The page is set to initially load 4 divs, which are the first 4, and then load 4 from the following pages (if applicable) until no more are available.)

.poster3 is the class of the divs holding the images, #mason is the selector div surrounding the dynamically created content.

EDIT Took a look at the infinite scroll code from the Masonry site, and stitched something together (although it isn't grabbing data):

var $j = jQuery.noConflict();
$j(function(){
var $jcontainer = $j('#mason');
$jcontainer.imagesLoaded(function(){
$jcontainer.masonry({
itemSelector: '.poster3',
});
});
(function() {
var $jloading = $j(""),
$jfooter = $j('footer'),
opts = {
offset: '100%',
continuous: 'true'
};
$jfooter.waypoint(function(event, direction) {
$jfooter.waypoint('remove');
$j('body').append($jloading);
$j.get($j('.more a').attr('href'), function(data) {
var $jdata = $j(data);
$j('#containerd').append($jdata.find('.poster开发者_开发问答3'));
$j('.more').replaceWith($jdata.find('.more'));
$jfooter.waypoint(opts);
});
}, opts)});
// trigger Masonry as a callback
function( newElements ) {
var $jnewElems = $j( newElements );
// ensure that images load before adding to masonry layout
$jnewElems.imagesLoaded(function(){
$jcontainer.masonry( 'appended', $jnewElems, true ); 
});
}
}
);

Firebug isn't throwing any errors for it, though.

Here is very simple but complete solution to combine them without any difficulties:

<script src="js/vendor/masonry.pkgd.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/waypoints-infinite.js"></script>

<script>
        $(window).load(function() {
            var container = $('.infinite-container');
            container.masonry({
                itemSelector: '.box'
            });
            $('.infinite-container').waypoint('infinite', {
                container: 'auto',
                items: '.box',
                more: '.infinite-more-link',
                offset: 'bottom-in-view',
                loadingClass: 'infinite-loading',
                onBeforePageLoad: $.noop,
                onAfterPageLoad: function() {
                    $(container).masonry('reloadItems');
                    $(container).masonry('layout')
                }
            });
        });
</script>