帮我看看哪里出错了
lianyuxiedi123
2016-03-01 16:55
$(window).on("load",function(){
waterfall();
var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
$(window).on("scroll",function(){
if(checkScrollSlide){
$.each(dataInt.data, function(key,value) {
console.log(value);
var oPin=$("<div>").addClass("pin").appendTo($("#main"));
var oBox=$("<div>").addClass("boc").appendTo($(oPin));
var oImg=$("img").attr("src","img/"+$(value).attr("src")).appendTo($(oBox));
});
waterfall();
}
})
})
function waterfall(){
var pin=$("#main>div");
var w=pin.eq(0).outerWidth();
var cols=Math.floor($(window).width()/w);
$("#main").width(w*cols).css("margin","0 auto");
var harr=[];
pin.each(function(index,value){
var h=pin.eq(index).outerHeight();
if (index<cols) {
harr[index]=h;
}else{
var minH=Math.min.apply(null,harr);
var minHIndex=$.inArray(minH,harr);
$(value).css({
"position":"absolute",
"top":minH+"px",
"left":minHIndex*w+"px",
})
harr[minHIndex]+=pin.eq(index).outerHeight();
}
})
}
function checkScrollSlide(){
var lastBox=$("#main>div").last();
var lastBoxDis=lastBox.offset().top+Math.floor(lastBox.outerHeight()/2);
var scrollTop=$(window).scrollTop();
var documentH=$(window).height();
return (lastBoxDis<scrollTop+documentH)?true:false;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<script type="text/javascript" src="js/waterfall.js" ></script>
<link rel="stylesheet" href="css/css-jq.css" />
</head>
<body>
<div id="main">
<div class="pin">
<div class="box">
<img src="img/1.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/3.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/5.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/6.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/7.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/8.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/9.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/10.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/11.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/12.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/13.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/14.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/15.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/16.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/17.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/18.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/19.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/20.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/21.jpg"/>
</div>
</div>
</div>
</body>
</html>
2回答
-
- qq_手起樱花落_0
- 2016-07-07 15:13:39
var oImg=$("img").attr("src","img/"+$(value).attr("src")).appendTo($(oBox)); 创建一个img标签 $('<img>')
-
- honely1314
- 2016-03-02 16:39:32
var oBox=$("<div>").addClass("boc").appendTo($(oPin));中boc改成box
瀑布流布局
97759 学习 · 736 问题
相似问题