1

我正在运行一个使用无限滚动和 Jquery Masonry（在页面上组织帖子）的 pinterest 风格网站。

www.telavivtimes.co.il

当我打开网站时，帖子往往会重叠或堆叠在一起。如果我调整屏幕大小（即放大，然后缩小），它似乎可以修复它。

砌体是这样称呼的：

    <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>

提前谢谢大家

4

0 回答 0