用老師這個方法，會有一個BUG如何解決？
如圖，第一次拖動，調(diào)用scroll方法并觸發(fā)事件時，剛開始會出現(xiàn)圖片重疊，再往下拖動滾動條會往上彈一下，然后又好了，并且在隨后的繼續(xù)拖動過程中，再觸發(fā)事件，圖片繼續(xù)加載又不會再出現(xiàn)這樣的情況了。
6 回答
舉報
0/150
提交
取消
如圖，第一次拖動，調(diào)用scroll方法并觸發(fā)事件時，剛開始會出現(xiàn)圖片重疊，再往下拖動滾動條會往上彈一下，然后又好了，并且在隨后的繼續(xù)拖動過程中，再觸發(fā)事件，圖片繼續(xù)加載又不會再出現(xiàn)這樣的情況了。
2016-05-17
舉報
2017-01-14
你把JS和JQ文件放到body最后面就可以了。
2016-10-09
你的問題解決了嗎？
我也是出現(xiàn)同樣的問題，我的跟老師的代碼的區(qū)別，只是給main在css上設(shè)置了固定的寬度，不隨瀏覽器窗口大小變化而改變列數(shù)。
2016-07-14
$oImg=$('<img>').attr("src","images/"+val.src).appendTo($oPic)這句代碼寫錯了，應(yīng)該這樣寫：
$oImg=$('<img>').attr("src","images/"+$(val).attr('src')).appendTo($oPic) ?val是DOM元素，要把它轉(zhuǎn)化成jquery元素，然后用jquery方法獲取它的值
2016-05-27
你試一下把 scrollslide()函數(shù)返回的條件改一下.
return (lastH<=scrollH) ? true : false ;
2016-05-19
$(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;
}
2016-05-19
是不是代碼問題呢 貼出來看看