大佬教程收集整理的这篇文章主要介绍了jquery-masonry – jQuery Masonry无限滚动和图片重叠问题与我的tumblr主题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
My theme应该覆盖tumblr的“每页15个帖子”限制,并且通过“无限滚动”选项,它应该将我的所有帖子(所有这些图片)放在一个无尽的页面中.嗯,事实并非如此.在here的一点帮助下,我设法将我的{block：Posts}包裹起来并且在砌体()调用中随机进行了一些更改我最终得到了this
你可以看到我的图片没有重叠(最后！)但是在15个帖子之后,它看起来像是创建了一个新页面并且最后的图片没有正确对齐.
我的jQuery砌体代码是这样的：
<script type="text/javascript">
$(window).load(function () {
$('.autopagerize_page_element').masonry(),$('.autopagerize_page_element').infinitescroll({
navSelector : "div.navigation",// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a#nextPage",// selector for the NEXT link (to page 2)
itemSelector : ".autopagerize_page_element",// selector for all items you'll retrieve
bufferPx : 10000,extraScrollPx: 12000,loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",loadingText : "<em></em>",},// call masonry as a callback.
function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); }
);
});
</script>
我知道,它一团糟……
非常感谢一些帮助.
每次调用砌体时,此脚本都会围绕条目创建一个包装器div,因为脚本,每个加载看起来像一个新页面,我想你可以简单地删除它.
一些技巧：
您不必等待$(windows).load来执行砌体,通过$(function()更改它
为避免图像重叠,请使用appened masonry方法和imagesLoad：Refer this
我看到你正在使用砌体1.0.1,请确保你使用的是砖石上一版本(2.1.06)
示例代码：
$(function() {
//$('.autopagerize_page_element').masonry();
var $container = $('.autopagerize_page_element');
//wait until images are loaded
$container.imagesLoaded(function(){
$container.masonry({itemSelector: '.entry'});
});
$('.autopagerize_page_element').infinitescroll({
navSelector : "div.navigation",// selector for the NEXT link (to page 2)
itemSelector : ".entry",// call masonry as a callback.
//function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); }
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems Now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended',$newElems,true );
});
}
);
});
<script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script> <!-- last masonry version -->
<script src="http://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"></script>
<!--<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>-->
希望能帮助到你
以上是大佬教程为你收集整理的jquery-masonry – jQuery Masonry无限滚动和图片重叠问题与我的tumblr主题全部内容，希望文章能够帮你解决jquery-masonry – jQuery Masonry无限滚动和图片重叠问题与我的tumblr主题所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。