jquery-isotope – 同位素和无限滚动与手动触发

发布时间:2020-07-30 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了jquery-isotope – 同位素和无限滚动与手动触发脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用带有Infinite Scroll插件的Isotope插件.使用默认设置Infinite Scroll会自动触发加载新元素,但是,我宁愿使用“加载更多图像”按钮.

我只缺少一小段代码,它将从无限卷轴中获取新元素,我可以传递给同位素INSERT函数.请在下面的代码中查看我的评论:

// initialize infinite scroll
$container.infinitescroll({
    navSelector  : '#paging',// selector for the paged navigation 
    nextSelector : '#paging a',// selector for the NEXT link (to page 2)
    itemSelector : '.col',// selector for all items you'll retrieve
    loading: {
        msgText: 'Loading...',finishedMsg: Loaded all!',}
    } // <-- NOTE that we do not use callback function here!
    );


$(window).unbind('.infscr'); 

$('#paging a').click(function(){

// NEED CODE HERE TO GET NEW ELEMENTS FROM INFINITE SCROLL AND PASS THOSE ELEMENTS TO $container.isotope('insert',$(newElements)); 

});

解决方法

无限滚动插件实际上提供了 “manual-trigger”-behavior来完成您所追求的目标.

在jquery.infinitescroll.js之后包含manual-trigger.js,告诉无限滚动通过传递行为来使用行为:’twitter’在调用插件时,然后只调用Isotope作为回调,如Isotope’s demo for Infinite Scroll所示:

$container.infinitescroll({
  navSelector  : '#paging',nextSelector : '#paging a',itemSelector : '.col',behavior: 'twitter',loading: {
      msgText: 'Loading...',finishedMsg: 'Loaded all!'
    }
  },// call Isotope as a callback
  function( newElements ) {
    $container.isotope( 'appended',$( newElements ) ); 
  }
);

总结

以上是脚本之家为你收集整理的jquery-isotope – 同位素和无限滚动与手动触发全部内容,希望文章能够帮你解决jquery-isotope – 同位素和无限滚动与手动触发所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!