自己在做java以前，自學過一段時間的前端，最近沒事翻出來以前寫過的一些前端的小案例，現在感覺也挺好玩，今天特地分享出來，感興趣的朋友可以看看，雖然技術含量倒不是很多，但是回憶起當初自學過的那段經歷，感覺還挺欣慰的，對於學習編程來說，自學真的挺煎熬的，但是要是真的能鑽進去也就樂在其中了。
瀑布流的效果呢就是，鼠標向下滑，圖片會自動加載，一直滑，圖片自動補位空缺的地方，讓圖片錯落有序的排列，如同看瀑布一般。
廢話不多說上源碼：
$(function(){
imgLocation()
var imgData = {"Data":[{"images":"0.jpg"},{"images":"1.jpg"},{"images":"2.jpg"},{"images":"3.jpg"},{"images":"4.jpg"},
{"images":"5.jpg"},{"images":"6.jpg"},{"images":"7.jpg"},{"images":"8.jpg"},{"images":"9.jpg"},
{"images":"10.jpg"},{"images":"11.jpg"},{"images":"12.jpg"},{"images":"13.jpg"},{"images":"14.jpg"},
{"images":"15.jpg"},{"images":"16.jpg"}]}//這裏的images是圖片的路徑
$(window).scroll(function(){
if(check()){
$.each(imgData.Data,function(key,value){
var oBox=$("<div>").addClass('box').appendTo($('#main'));
var ooBox=$('<div>').addClass('pic').appendTo($(oBox));
var oimg=$('<img>').attr('src','images/'+$(value).attr('images')).appendTo($(ooBox))//這裏的value爲原生JS對象所以轉化爲jQ對象
})
imgLocation()
}
})
})
//判斷是否需要加載
function check(){
var $lastboxs=$('#main>div').last();
var lastHeight=$lastboxs.offset().top+Math.floor($lastboxs.outerHeight()/2);
var scrollTop=$(window).scrollTop();
var clientHeight=$(window).height();
console.log(lastHeight+":"+scrollTop+":"+clientHeight)
if(lastHeight<scrollTop+clientHeight)
return true;
}
//加載圖片
function imgLocation(){
var boxs=$("#main>div")
var imgWidth=boxs.eq(0).outerWidth();
var num=Math.floor($(window).width()/imgWidth)
$("#main").width(imgWidth*num).css("margin","0 auto")
var heightArr=[];
boxs.each(function(index,value){//each中的兩個參數index如同for循環中的i，value爲DOM對象是i對應的class爲box的元素，
//如同for循環中的boxs[i]
var h=boxs.eq(index).outerHeight();
if(index<num){
heightArr[index]=h;
}else{
var minHeight=Math.min.apply(null,heightArr)
var minNum=$.inArray(minHeight,heightArr)//調用這個方法直接可以返回該數組中最小值的位置
$(value).css({ //value本身爲DOM對象所以不能直接用JQ方法,所以要將value轉化爲jq對象：$(value)所以加一個$()
"position":"absolute",
"left":imgWidth*minNum+"px",
"top":minHeight+"px"
})
heightArr[minNum]=heightArr[minNum]+boxs.eq(index).outerHeight();
}
})
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ瀑布流</title>
<link rel="stylesheet" href="JQpubu.css">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<!-- <script type="text/javascript" src="jquery-2.2.3.min.js"></script> -->
<script type="text/javascript" src="JQpubu.js"></script>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="images/0.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/8.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/9.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/10.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/11.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/12.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/13.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/14.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/15.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/16.jpg" alt="">
</div>
</div>
</div>
</body>
</html>*{
margin: 0;
padding: 0;
}
#main{
position: relative;
margin: 0 auto;
}
#main .box{
float: left;
/*margin-left: 10px;
margin-top: 10px;*/
padding: 5px;
}
#main .box .pic img{
width: 150px;
}
#main .box .pic{
border: 5px solid #ddd;
border-radius: 5px;
padding: 5px;
box-shadow: 0 0 5px #ddd;
}