我正在运行一个pinterest风格的网站,它使用无限卷轴和Jquery Masonry(用于整理页面上的帖子)。
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>
提前全部谢谢