帮我看一下有什么问题

源自：5-2 编程挑战

帮我看一下有什么问题

*{padding: 0;margin:0;}

#main{

position: relative;

}

.pin{

padding: 15px 0 0 15px;

float:left;

}

.box{

padding: 10px;

border:1px solid #ccc;

box-shadow: 0 0 6px #ccc;

border-radius: 5px;

}

.box img{

width:162px;

height:auto;

}

</style>

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

// 调用waterfall函数

waterfall();

var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};

window.onscroll=function(){

// 拖动滚动条时

if(checkscrollside()){

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

var pin=$("<div>").addClass("pin").appendTo($("#main"));

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

$("<img>").attr("src","images/"+$(value).attr("src")).appendTo($(box));

})

waterfall();

}

});

function waterfall(){

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

var $pins=$("#main>div");

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

var num=Math.fioor($(window).width()/w);

/*$("#main").css({

"width":w*num+"px",

"margin":"0 auto"

});*/

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

var ar=[];

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

if(index<num){

ar[index]=pins.eq(index).outerHeight();

}else{

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

var minindex=$.inArray(minH,ar);

$(value).css({

"position":"absolute",

"top":minH+"px",

"left":minindex*w+"px"

});

ar[minindex]+=$pins.eq(index).outerHeigt();

}

})

}

function checkscrollside(){

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

var lastpin=$("#main>div").last();

var lastH=lastpin.offset().top+Math.floor(lastpin.outerHeight()/2);

var scrolltop=$(window).scrollTop();

var docH=$(window).height();

return(lastH<scrolltop+docH)?true:false;

}

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

图片加载不出来？
到了21张后面就没有了？

提问者：慕粉4349307 2016-11-23 15:36

帮我看一下有什么问题

个回答