您的位置：首页 > 其它

wp的瀑布流插件infinite-scroll对于navSelector非最底元素(或叫到底距离不固定情形)存在bug

2013-03-28 16:54 369 查看

网址
+ https://github.com/paulirish/infinite-scroll 版本
+ version 2.0b2.120519

本人电脑英语阅读能力还行,但是写能力很差,折腾了很大一会,估计能反馈清楚了吧.
主要原因是作者在写时,未考虑此情况,估计绝大人设计的网页都是瀑布流对象总是最底的,
而我们公司设计的东西,竟然出现了中间瀑布流内容比二边内凹进去了,才发现了此情况.
且插件版本维护存在问题,各个地方的版本不相同,且各个版本使用方法差别很大,
开始不清楚这个情况,拿着旧版本代码,使用着新版本的用法,弄了好大一会,竟然有问题,
且doc文档竟然等于无,估计作者认为东西太简单了,不值得写.
不得已,全盘看过js实现.才发现版本对不上用法,
只有git上是最新版本,
作者在实现时,把nav到底高度总是死的,所以才会出现问题,
导致变的nav会出现一滚动就会加载下页的问题出现.
不修改原代码的简单修改方式如下,估计后期作者会修正.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.b_liBox{border:1px solid red;height:500px;margin-top:50px;}
.center,.left,.right{width:10px;overflow:hidden;float:left; background-color:blue; border:1px solid black;padding:10px;margin:5px;}
.left,.right{height:2000px;}
</style>
</head>

<body>
<div class="left"></div>

<div class="center">
<div id="scrollFloatBox">
<div class="b_liBox" id="newLoadDiv"></div>
</div>
<div id="over2load"><a href="#">下页</a></div>
</div>

<script src="jquery.min.js"></script>
<script src="jquery.infinitescroll.min.js"></script>

<script>
$(function(){
$.extend($.infinitescroll.prototype,{
_nearbottom_qidizi: function() {
var opts = this.options;
var navBH = $(document).height() - $(opts.navSelector).parent().offset().top;//下页top到底
var sclBH = 0 + $(document).height() - (opts.binder.scrollTop()) - $(window).height();//滚动底到底
return sclBH - opts.bufferPx < navBH;
}
});
$('#scrollFloatBox').infinitescroll({
loading: {
finishedMsg: "<em>加载完成</em>",
img: "http://icon.chinahrd.net/image/ajax_load.gif",
msgText: "<em>正在加载更多内容...</em>",
},
behavior:'qidizi',
contentSelector : '#scrollFloatBox', //append内容对象
debug: true,
binder: $(window), // 滚动条触发加载的对象
nextSelector: "#over2load a:first", //下页对象必须是一个有href的a,只用于取path,置于navSelector内
navSelector: "#over2load a:first", //当前浏览器可见底线处于它offettop 与它的 bufferPx之间区域就开始加载新内容,置contentSelector外
itemSelector: "#newLoadDiv", //注意是要加载内容进行筛选,只加载ajax返回的html中$(itemSelector)内容,contentSelector中也必须有
animate: 0, //是否加载完成就滚动到新内容处
pathParse: function(path, page){
return function(curPage) {
return '?page=' +curPage+ '&r=' +new Date().getTime();
};
},
errorCallback:function(){ alert('加载失败') }, //404之类
dataType: 'html+callback', //跨域ajax
prefill: 0, //resize触发内置重画方法
maxPage:50000 //最多加载次数,
}, function(box, opts){//加载完成时触发
});
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航