文章/答案/技术大牛

发布

社区首页 >问答首页 >Jquery imagesLoaded插件重叠问题

问Jquery imagesLoaded插件重叠问题
EN

Stack Overflow用户

提问于 2012-06-20 21:55:47

回答 1查看 1.6K关注 0票数 0

我有一个tumblelog，它使用jquery砖石和在帖子上无限滚动。砌体只适用于前几个柱，然后重叠其他一切。我知道这类问题被问了很多次，但似乎没有人知道答案。这是我的密码：

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>

<script type="text/javascript">
$(window).load(function(){
var $wall = $('#posts');
$wall.imagesLoaded(function(){
$wall.masonry({
columnWidth: 196,
itemSelector: '.post',
isAnimated : false
});
});

$wall.infinitescroll({
navSelector : '#navigation', 
nextSelector : 'a#nextPage', 
itemSelector : '.post', 
bufferPx : 2000,
debug : false,
errorCallback: function() { 
$('#infscr-loading').fadeOut('normal'); 
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
});
}); $('#content').show(500);
});

</script>

这是我的链接。，谢谢！

jquery-masonry

infinite-scroll

tumblr

回答 1

Stack Overflow用户

发布于 2012-06-20 22:36:56

你有太多的问题在你的网页上给你一个简单的答案。

你有2！包含不同的“无限滚动”脚本。一个是这一行:另一个包含在另一个脚本中:删除第一个脚本，保留第二个脚本。
第二个脚本是打算与砖石插件一起使用的脚本，但是您给出的代码示例完全错误。我不知道从哪里开始。在对$wall.masonry的调用中，"singleMode: true“不是有效的选项。您在脚本中引用的几个元素甚至在页面中都不存在：

1. '.masonryWrap' does not exist
2. '#navigation' does not exist
3. 'a#nextPage' does not exist

您的页面在任何地方都没有导航链接，因此jquery函数没有任何可用于"navSelector“和"nextSelector”的内容。

，所以把它放在一起。--

您需要做的第一件事是消除两个冲突的InfiniteScroll脚本。

然后，您需要将导航链接添加到主题代码中，这样就可以正确地使用无限滚动功能(它需要知道下一页的链接是什么)。

示例：将其插入主题代码中的某个位置，但要确保它不被困在{block：}或{block:PermalinkPage}等内容中。

{block:Pagination}
    <div id="pagination" style="display:none;">
        {block:PreviousPage}<a id="previous_page" href="{PreviousPage}">previous</a>{/block:PreviousPage}
        {block:NextPage}<a id="next_page" href="{NextPage}">next</a>{/block:NextPage}
    </div>
{/block:Pagination}

之后，您需要修复JS代码，以正确引用页面上实际存在的元素。

示例

<script type="text/javascript">
$(document).ready(function(){
    var $wall = $('#posts');
    $wall.imagesLoaded(function(){
        $wall.masonry({
            itemSelector: '.post',
            isAnimated : false
        });
    });

    $wall.infinitescroll({
        navSelector : '#pagination', 
        nextSelector : '#next_page', 
        itemSelector : '.post'
    },
    function( newElements ) {
        var $newElems = $( newElements );
        $newElems.hide();
        $newElems.imagesLoaded(function(){
            $newElems.fadeIn('slow');
            $wall.masonry( 'appended', $newElems, false );
        });
    });
});
</script>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11128767

复制

相似问题

问Jquery imagesLoaded插件重叠问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery imagesLoaded插件重叠问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery imagesLoaded插件重叠问题
EN