Jquery滝流効果(下編)
62966 ワード
前回の滝の効果に続きます.
最初のファイルmyselfは滝の流れの効果を実現しましたが、最適化できるところがあります.例えば、initialメソッドは、初めて読み込んだときにinitialメソッドを呼び出して最初から徐々にレイアウトするのは大丈夫です.butは、後にドラッグしてスクロールした後、条件を満たしたら、他のものをロードし続けます.ロードした後、再度initial()を呼び出す方法は、ここで最適化できます.前の要素が配置されていますので、レイアウトを変更する必要はありません.したがって、後の要素から本編を開始することができます.最適化された結果です.
だから、initialの方法を最適化して、パラメータが存在するなら、レイアウトパラメータの要素を与えます.そうでなければ、レイアウトは$
コードは以下の通りです
最初のファイルmyselfは滝の流れの効果を実現しましたが、最適化できるところがあります.例えば、initialメソッドは、初めて読み込んだときにinitialメソッドを呼び出して最初から徐々にレイアウトするのは大丈夫です.butは、後にドラッグしてスクロールした後、条件を満たしたら、他のものをロードし続けます.ロードした後、再度initial()を呼び出す方法は、ここで最適化できます.前の要素が配置されていますので、レイアウトを変更する必要はありません.したがって、後の要素から本編を開始することができます.最適化された結果です.
だから、initialの方法を最適化して、パラメータが存在するなら、レイアウトパラメータの要素を与えます.そうでなければ、レイアウトは$
コードは以下の通りです
<!DOCTYPE html>
<html >
<head>
<meta charset="gb2312" />
<title>myself ——— </title>
<script type="text/javascript" src="../js/jquery.js"></script>
<style type="text/css">
#wrap{position:relative;}
#wrap .box {
float: left;
height: auto;
padding: 10px;
width: 280px;
}
#wrap .box .info {
background:none #fff;
border-radius: 8px;
box-shadow: 0 0 11px #666666;
height: auto;
width: 280px;
}
#wrap .box .info .pic {
height: auto;
margin: 0 auto;
padding-top: 10px;
width: 260px;
}
#wrap .box .info .pic img {
border-radius: 3px;
width: 260px;
}
#wrap .box .info .title {
color: #666;
font-size: 18px;
font-weight: bold;
height: 40px;
line-height: 40px;
margin: 0 auto;
overflow: hidden;
text-align: center;
width: 260px;
}
#wrap .box .info .title a{
color:#444;
text-decoration:none;
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
<div class="info">
<div class="pic"><img src="images/1.jpg"></div>
<div class="title"><a href="http://www.sucaijiayuan.com"> -sucaijiayuan.com</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/2.jpg"></div>
<div class="title"><a href="http://www.sucaijiayuan.com"> -sucaijiayuan.com</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/3.jpg"></div>
<div class="title"><a href="http://www.sucaijiayuan.com"> -sucaijiayuan.com</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/4.jpg"></div>
<div class="title"><a href="http://www.sucaijiayuan.com"> -sucaijiayuan.com</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/5.jpg"></div>
<div class="title"><a href="http://www.sucaijiayuan.com"> -sucaijiayuan.com</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/6.jpg"></div>
<div class="title"><a href="http://www.sucaijiayuan.com"> -sucaijiayuan.com</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/7.jpg"></div>
<div class="title"><a href="http://www.sucaijiayuan.com"> -sucaijiayuan.com</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/8.jpg"></div>
<div class="title"><a href="http://www.sucaijiayuan.com"> -sucaijiayuan.com</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/9.jpg"></div>
<div class="title"><a href="http://www.sucaijiayuan.com"> -sucaijiayuan.com</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/10.jpg"></div>
<div class="title"><a href="http://www.sucaijiayuan.com"> -sucaijiayuan.com</a></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
/* myself ， 。
initial ， initial 。
but, ， ， ， initial() ，
， ， 。
。*/
var hArray=[];
var datas=[{"src":"1.jpg","txt":" 1"},
{"src":"2.jpg","txt":" 2"},
{"src":"3.jpg","txt":" 3"},
{"src":"4.jpg","txt":" 4"},
{"src":"5.jpg","txt":" 5"},
{"src":"6.jpg","txt":" 6"},
{"src":"7.jpg","txt":" 7"},
{"src":"8.jpg","txt":" 8"},
{"src":"9.jpg","txt":" 9"},
{"src":"10.jpg","txt":" 10"}];
initial();
/*$("window").on("load",function(){
//
initial();
})*/
$(window).scroll(function(){
if(scrollCommanded()){
var objArr=[];
for(var i=0;i<30;i++){
var index=Math.floor(Math.random()*10);// 1 9
var box=document.createElement("div");
box.className="box";
var info=document.createElement("div");
info.className="info";
var pic=document.createElement("div");
pic.className="pic";
var img=document.createElement("img");
img.src="images/"+datas[index].src;
pic.appendChild(img);
var title=document.createElement("div");
title.className="title";
title.innerHTML='<a href="#">'+datas[index].txt+'</a>';
info.appendChild(pic);
info.appendChild(title);
box.appendChild(info);
document.getElementById("wrap").appendChild(box);
objArr.push(box);
}
initial(objArr);
}
})
//
function scrollCommanded(){
var last=$("#wrap .box").last();
if($(window).height()+$(window).scrollTop()>last.offset().top+Math.floor(last.outerHeight()/2)){
return true;
}
return false;
}
//
function initial(objArra){
var boxes=objArra||$("#wrap .box"),
boxW=objArra?boxes[0].offsetWidth:boxes.eq(0).outerWidth(),
cols=Math.floor($(window).width()/boxW);
$("#wrap").width(cols*boxW).css("margin","0 auto");
if(hArray.length==0){
boxes.each(function(index,value){
if(index<cols){
hArray.push($(value).outerHeight());
}else{
var minH=Math.min.apply(null,hArray);
var minIndex=$.inArray(minH,hArray);
$(value).css({
"position":"absolute",
"top":minH,
"left":minIndex*boxW}
);
hArray[minIndex]+=$(value).outerHeight();
}
})
}else{
$(boxes).each(function(index,value){
var minH=Math.min.apply(null,hArray);
var minIndex=$.inArray(minH,hArray);
$(value).css({
"position":"absolute",
"top":minH,
"left":minIndex*boxW}
);
hArray[minIndex]+=$(value).outerHeight();
})
}
}
</script>
</html>