帮我看一下有什么问题
慕粉4349307
2016-11-23 15:36
<style type="text/css">
*{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>
<script>
$( 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 id="main">
<div class="pin">
<div class="box">
<img src="./images/1.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/3.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/5.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/6.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/7.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/8.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/9.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/10.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/11.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/12.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/13.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/14.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/15.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/16.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/17.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/18.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/19.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/20.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/21.jpg"/>
</div>
</div>
</div>
</body>
图片加载不出来？
到了21张后面就没有了？
3回答
-
- LeftJS
- 2017-11-29 17:27:41
$("<img>").attr("src","./images/"+$(value).attr("src")).appendTo($(box)); jQuery代码里面的路径要和html里面的一样
-
- qq_12月_0
- 2017-01-18 20:05:20
你IMG只有21张
如果要加图片 需要html Img里注明路径 不然怎么加载图片
-
- 谢凌
- 2016-11-28 11:31:03
不知道哎，帮你顶上去。
图片加载不出来？
到了21张后面就没有了？
瀑布流布局
97759 学习 · 736 问题
相似问题