這里需要jquery-2.1.1.min.js文件，請(qǐng)自行下載，圖片請(qǐng)自行下載
首先，創(chuàng)建一個(gè).html文件<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.1.min.js" type="text/JAVAscript"></script>
<script src="js/App.js" type="text/JavaScript"></script>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="container">
<div class="box">
<div class="content">
<img src="img/1.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/2.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/3.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/4.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/5.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/6.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/7.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/8.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/9.jpg"/>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/10.jpg"/>
</div>
</div>
</div>
</body>
</html>寫它的樣式：style.css,創(chuàng)建一個(gè)css文件夾，把這個(gè)css樣式放入到此文件夾里面*{margin: 0;padding: 0;
}
.box{position: relative;float: left;
}
.content{padding: 10px;border: 1px solid #ccc;box-shadow: 0 0 5px #ccc;/*添加邊框陰影*/border-radius: 5px;/*圓角邊框?yàn)?像素*/
目前是這種效果，這里就需要考慮，怎么讓第二行的第一個(gè)圖片接著第一行里面圖片高度最小的圖片下面
創(chuàng)建一個(gè)app.js文件
$(function(){
$(window).on("load", function () {imgLocation();
});});
function imgLocation(){
var box=$(".box");
var boxWidth=box.eq(0).width();//獲取圖片的寬度var num= Math.floor($(window).width()/boxWidth);//確定一排能擺放幾個(gè)
var boxArry=[];//存儲(chǔ)所有box的高度
box.each(function(index,value){
var boxHeight=box.eq(index).height();//盒子的高度
if(index<num)
{boxArry[index]=boxHeight;//往數(shù)組添加
}else{
var minboxHeigh=Math.min.apply(null,boxArry);//獲取最小盒子的高度
var minboxIndex= $.inArray(minboxHeigh,boxArry);//獲取盒子的位置
$(value).css({//設(shè)置第二行的第一張圖片在第一行高度最小的那張圖片下面
"position":"absolute",
"top":minboxHeigh,
"left":box.eq(minboxIndex).position().left});
boxArry[minboxIndex]+=box.eq(index).height();//記錄第一行的最小高度和第二行第一個(gè)圖片的高度}
});}
現(xiàn)在實(shí)現(xiàn)瀑布流的效果了
接下來就要實(shí)現(xiàn)滾動(dòng)跳下來，實(shí)現(xiàn)自動(dòng)加載圖片的效果
如下是完整的app.js 內(nèi)容：
$(function(){
$(window).on("load", function () {
imgLocation();
var dataImg={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},
{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"}]};
window.onscroll=function(){
if(scollside())
{
$.each(dataImg.data,function(index,value){
//動(dòng)態(tài)創(chuàng)建div
//動(dòng)態(tài)創(chuàng)建內(nèi)容div
//動(dòng)態(tài)創(chuàng)建img，將src動(dòng)態(tài)解析添加到內(nèi)容層里面
var box=$("<div>").addClass("box").appendTo($("#container"));
var content=$("<div>").addClass("content").appendTo(box);
$("<img>").attr("src","./img/"+$(value).attr("src")).appendTo(content);
});
imgLocation();//再次調(diào)用一下瀑布流效果，不然不會(huì)出現(xiàn)瀑布流效果
}
};
});
});
function scollside(){
var box=$(".box");
/*box.last().get(0).offsetTop 盒子最后一個(gè)對(duì)象距頂端的距離*/
/*Math.floor(box.last().height/2) 最后圖片的高度的一半*/
var lastboxHeigh=box.last().get(0).offsetTop+Math.floor(box.last().height()/2);
var documentHeight=$(document).width();//當(dāng)前容器的高度
var scollHeight=$(window).scrollTop();//
return (lastboxHeigh<documentHeight+scollHeight)?true:false;//如果當(dāng)前滾動(dòng)高度和容器高度大于最后盒子的高度則加載圖片
}
function imgLocation(){
var box=$(".box");
var boxWidth=box.eq(0).width();//獲取圖片的寬度
var num= Math.floor($(window).width()/boxWidth);//確定一排能擺放幾個(gè)
var boxArry=[];//存儲(chǔ)所有box的高度
box.each(function(index,value){
var boxHeight=box.eq(index).height();//盒子的高度
if(index<num)
{
boxArry[index]=boxHeight;//往數(shù)組添加
}else
{
var minboxHeigh=Math.min.apply(null,boxArry);//獲取最小盒子的高度
var minboxIndex= $.inArray(minboxHeigh,boxArry);//獲取盒子的位置
$(value).css({//設(shè)置第二行的第一張圖片在第一行高度最小的那張圖片下面
"position":"absolute",
"top":minboxHeigh,
"left":box.eq(minboxIndex).position().left
});
boxArry[minboxIndex]+=box.eq(index).height();//記錄第一行的最小高度和第二行第一個(gè)圖片的高度
}
});
}
說明一下，我這里的圖片都經(jīng)過處理寬度設(shè)置成了一樣，如果沒有設(shè)置的話，那么在css樣式里面還要設(shè)置寬度固定，高度自適應(yīng)即可！
