我这样一加载更多的时候，图片就全飞了。请大神指教

源自：5-2 编程挑战

我这样一加载更多的时候，图片就全飞了。请大神指教

<!DOCTYPE html>

<html>

<head>

<title>带有分散效果的瀑布流</title>

*{padding: 0;margin:0;}

#main{

position: relative;

}

.pin{

padding: 15px 0 0 15px;

float:left;

15+20+163+2

}

.box{

padding: 10px;

border:1px solid #ccc;

box-shadow: 0 0 6px #ccc;

border-radius: 5px;

}

.box img{

width:163px;

height:auto;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

$( window ).on( "load", function(){

// 调用waterfall函数

waterfall();

var json={'data':[{'src':'http://pic1.win4000.com/pic/4/4b/c6461197591.jpg'},{'src':'http://pic1.win4000.com/pic/4/4b/c6461197588.jpg'},{'src':'http://pic1.win4000.com/pic/4/4b/c6461197592.jpg'},{'src':'http://pic1.win4000.com/pic/7/20/0bdb1197574.jpg'},{'src':'http://pic1.win4000.com/pic/7/20/0bdb1197575.jpg'},{'src':'http://pic1.win4000.com/pic/7/20/0bdb1197576.jpg'},{'src':'http://pic1.win4000.com/pic/7/20/0bdb1197573.jpg'}]};

window.onscroll=function(){

// 拖动滚动条时

if(checkscrollside()){

console.log(checkscrollside());

$(json.data).each(function(index,value){

//创建节点

// $("<div class='box'><div class='pic'><img src='images/"+value.src+"'></div></div>").appendTo("#main");

var $img = $("<img>").attr("src",'images/'+value.src);

var $box = $("<div>").addClass("box").append($img);

var $pin = $("<div>").addClass("pin").append($box);

$("#main").append($pin);

});

}

// waterfall();

}

});

var hArr=[];

function waterfall(){

// 计算及定位数据块显示分散效果

var $main = $("#main");

var $pins = $("#main>.pin");

//设置外包裹main的宽度

var w = $pins.eq(0).outerWidth();

var cols = Math.floor($(window).width()/w);

$main.width(cols*w).css("margin","0 auto");

$pins.each(function(index,value){

//初始化数组

if(index<cols){

hArr.push(0);

}

//分散效果

$(value).css({

'position':'absolute',

'left':200+Math.random()*300+'px',

'top':200+Math.random()*300+'px'

});

//定位盒子

show($pins,w,0);

}

function show(pins,width,i){

var $ele = pins.eq(i);

var minH = Math.min.apply(null,hArr);

var minIndex = $.inArray(minH,hArr);

$ele.animate({

left:minIndex*width+'px',

top:hArr[minIndex]+'px'

},300,function(){

hArr[minIndex]+=$ele.outerHeight();

i++;

show(pins,width,i);

});

}

function checkscrollside(){

// 检测是否具备了加载数据块的条件

//获取最后一个盒子

var $lastBox = $("#main>.pin:last");

var offsetTop = $lastBox.offset().top+$lastBox.outerHeight()-10;

var scrollTop = $(document).scrollTop()+$(window).height();

// console.log(scrollTop+"------"+offsetTop);

return scrollTop>offsetTop?true:false;

}

</script>

</html>

提问者：Edge2J 2017-06-30 17:49

我这样一加载更多的时候，图片就全飞了。请大神指教

个回答