編程挑戰(zhàn)
小伙伴們，根據(jù)所學(xué)知識，使用jQuery實現(xiàn)加載圖片帶有分散效果的瀑布流布局
任務(wù)
一、定義圖片布局函數(shù)waterfall
二、在waterfall函數(shù)中定義根據(jù)class獲取元素函數(shù)getByClass
三、計算整個父盒子的寬度且讓它在瀏覽器中水平居中
四、計算及排列每個數(shù)據(jù)塊應(yīng)該出現(xiàn)的位置，一開始數(shù)據(jù)塊緊跟在第二張圖片的后邊且位于最高的那個圖片的下邊，然后通過動畫分散到它該出現(xiàn)的位置
五、拖動滾動條時定義檢測是否具備了滾條加載數(shù)據(jù)塊條件的函數(shù)。
六、遍歷給出的數(shù)據(jù)，將圖片添加到數(shù)據(jù)塊中渲染出來
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"/></script>
<title>帶有分散效果的瀑布流</title>
<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(){
// 調(diào)用waterfall函數(shù)
var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
window.onscroll=function(){
// 拖動滾動條時
}
});
function waterfall(){
// 計算及定位數(shù)據(jù)塊顯示分散效果
}
function checkscrollside(){
// 檢測是否具備了加載數(shù)據(jù)塊的條件
}
</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>
</html>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
