Jquery Append Overlaying when used with Packery

Question

For the life of me I have not been able to figure out why the divs (with images contained) fall behind the existing divs instead of appending.

Basically the appended divs with images are falling behind the existing divs instead of appending. When I remove Pickery it works correctly, but need the functionality of pickery to get the correct layout.

Below is what I use to init Packery and trigger the append when scrolling.

$postswrapper = jQuery("#postswrapper");

$postswrapper.imagesLoaded(function(){
    $postswrapper.packery({
        "itemSelector": ".image_block", "gutter": 10
    });
});

var throttled = _.throttle(function(){
    var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
    var scrolltrigger = 0.95;

    if ((wintop/(docheight-winheight)) > scrolltrigger && scroll_more) {
        scroll_more = false;

        $.ajax({
            url: current_web_root + "?action=ajax|load_thumbs&PageSpeed=off",
            success: function(html) {
                if(html) {

                    $postswrapper.append(html);

                    $postswrapper.imagesLoaded(function(){
                        $postswrapper.packery( 'appended', html );
                    });

                    scroll_more = true;
                }
            }
        });
    }
}, 100);
$(window).scroll(throttled);

The HTML...

<div id="postswrapper">
    <div class="image_block" id="image_block_id_68">
        <div class="image_holder">
                <a href="http://review.marijuanaselfies.com/p-1/i-68/briana-marie?orderby=&amp;q=" imageID="68" class="thumb_image"><img src="http://review.marijuanaselfies.com/contestant_image/68/home/briana-marie.jpg" class="center-block"></a>
        </div>
        <input type="button" class="btn btn-success btn-lg btn-vote center-block vote68" id="vote68" value="vote"  />
        <h4 class="text-votes center total_votes68">0 votes</h4>
    </div>
    <div class="image_block" id="image_block_id_69">
        <div class="image_holder">
                <a href="http://review.marijuanaselfies.com/p-1/i-69/briana-marie?orderby=&amp;q=" imageID="69" class="thumb_image"><img src="http://review.marijuanaselfies.com/contestant_image/69/home/briana-marie.jpg" class="center-block"></a>
                </div>
                <input type="button" class="btn btn-success btn-lg btn-vote center-block vote69" id="vote69" value="vote"  />
                <h4 class="text-votes center total_votes69">0 votes</h4>
        </div>
    </div>

The site lives here (please excuse the content, nothing obscene...): http://review.marijuanaselfies.com/

I have added a jsfiddle workup of the issue. http://jsfiddle.net/36da6jha/5/

Many thanks!!!

Answer 1

Packery expects the appended item to be an element, not just a string. I updated your Fiddle with one line and it seems to work the way you're wanting it to.

if (html) {

    html = $(html);
    $postswrapper.append(html);

...

Fiddle

There might be a better way to do it than that, but it should get you what you need.