如图,第一次拖动,调用scroll方法并触发事件时,刚开始会出现图片重叠,再往下拖动滚动条会往上弹一下,然后又好了,并且在随后的继续拖动过程中,再触发事件,图片继续加载又不会再出现这样的情况了。
你把JS和JQ文件放到body最后面就可以了。
你的问题解决了吗?
我也是出现同样的问题,我的跟老师的代码的区别,只是给main在css上设置了固定的宽度,不随浏览器窗口大小变化而改变列数。
$oImg=$('<img>').attr("src","images/"+val.src).appendTo($oPic)这句代码写错了,应该这样写:
$oImg=$('<img>').attr("src","images/"+$(val).attr('src')).appendTo($oPic) val是DOM元素,要把它转化成jquery元素,然后用jquery方法获取它的值
你试一下把 scrollslide()函数返回的条件改一下.
return (lastH<=scrollH) ? true : false ;
$(window).on("load",function() {
waterfall();
var dataInt={"data":[{"src":"23.jpg"},{"src":"24.jpg"},{"src":"25.jpg"},{"src":"26.jpg"},{"src":"27.jpg"},{"src":"28.jpg"},{"src":"29.jpg"},{"src":"30.jpg"},{"src":"31.jpg"},{"src":"32.jpg"},{"src":"33.jpg"},{"src":"34.jpg"},{"src":"35.jpg"},{"src":"36.jpg"},{"src":"37.jpg"},{"src":"38.jpg"},{"src":"39.jpg"},
{"src":"40.jpg"},{"src":"41.jpg"},{"src":"42.jpg"},{"src":"43.jpg"},{"src":"44.jpg"},{"src":"45.jpg"},{"src":"46.jpg"},{"src":"47.jpg"},{"src":"48.jpg"},{"src":"49.jpg"},{"src":"50.jpg"},{"src":"51.jpg"},{"src":"52.jpg"},{"src":"53.jpg"},{"src":"54.jpg"},{"src":"55.jpg"},{"src":"56.jpg"},{"src":"57.jpg"},{"src":"58.jpg"},
{"src":"59.jpg"},{"src":"60.jpg"},{"src":"61.jpg"},{"src":"62.jpg"},{"src":"63.jpg"},{"src":"64.jpg"},{"src":"65.jpg"},{"src":"66.jpg"},{"src":"67.jpg"},{"src":"68.jpg"},{"src":"69.jpg"},{"src":"70.jpg"},
{"src":"71.jpg"},]};
$(window).scroll(function() {
if(scrollside()) {
$.each(dataInt.data, function(index, val) {
$oBox=$('<div>').addClass('box').appendTo('#content');
$oPic=$('<div>').addClass('pic').appendTo($oBox);
$oImg=$('<img>').attr("src","images/"+val.src).appendTo($oPic);
});
waterfall();
}
});
});
function waterfall(){
var $box=$("#content>div");
var wbox=$box.eq(0).outerWidth();
var cols=Math.floor($(window).width()/wbox);
$("#content").width(wbox*cols).css("margin","0 auto");
var Harry=[];
$box.each(function(index, value) {
var h=$box.eq(index).outerHeight();
if(index<cols){
Harry[index]=h;
}
else{
var minH=Math.min.apply(null,Harry);
var minIndex =$.inArray(minH,Harry);
$(value).css({"position":"absolute","left":minIndex*wbox+"px","top":minH+"px",});
Harry[minIndex]+=$box.eq(index).outerHeight();
}
});
}
function scrollside(){
var $lastBox=$("#content>div").last();
var lastH=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
var scrollH=$(window).scrollTop()+$(window).height();
return (scrollH>lastH)?true:false;
}
是不是代码问题呢 贴出来看看