Overlapping posts with images in Jquery Masonry

I am running a pinterest style website that uses an infinite scroll and Jquery Masonry (to organize posts on the page).

www.telavivtimes.co.il

Read More

When I open the site the posts tend to overlap or stack on top of each other. If I resize the screen (ie zoom in, then zoom out) it seems to fix it.

This is how the masonry called:

    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/assets/js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/assets/js/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">

jQuery(document).ready(function () {

function ismobileft() {
    jQuery('.post').fitVids();
}


if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i)) {
    ismobileft();
} else {
    jQuery('#postwrapper').masonry({
        columnWidth: 10,
        itemSelector: '.post',
        isAnimated: true,
        animationOptions: {
            duration: 700,
            easing: 'linear',
            queue: false
        }
    });
}

jQuery('#postwrapper').infinitescroll({
    navSelector: '.nextPrev',
    nextSelector: '.nextPrev a',
    itemSelector: '.infinite',
    loading: {
        msgText: '<?php if(of_get_option('
        ft_loc_loading_new_posts ')): echo of_get_option('
        ft_loc_loading_new_posts '); else: ?>Loading new posts...<?php endif; ?>',
        finishedMsg: '<?php if(of_get_option('
        ft_loc_no_nore_pages_to_load ')): echo of_get_option('
        ft_loc_no_nore_pages_to_load '); else: ?>No more pages to load.<?php endif; ?>',
        img: '<?php bloginfo('
        template_directory '); ?>/assets/images/loader.gif'
    },
    errorCallback: function () {
        // fade out the error message after 2 seconds
        jQuery('#infscr-loading').animate({
            opacity: .8
        }, 2000).fadeOut('normal');
    }
},
// call masonry as a callback
function (newElements) {

    // hide new items while they are loading
    var jQuerynewElems = jQuery(newElements).css({
        opacity: 0
    });
    // ensure that images load before adding to masonry layout
    jQuerynewElems.imagesLoaded(function () {
        // show elems now they're ready
        jQuerynewElems.animate({
            opacity: 1
        });

        if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i)) {
            ismobileft();
        } else {
            jQuery('#postwrapper').masonry('appended', jQuerynewElems, true);
        }
        jFadeInit();
    });
});
});

</script>

Thanks all in advance

Related posts

Leave a Reply