实现大概是下面的效果，写了比较详细的注释
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
body{padding:0;margin:0;}
img{border:none;}
a{text-decoration:none;color:#444;}
a:hover{color:#999;}
#title{width:600px;margin:20px auto;text-align:center;}
@-webkit-keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
@-moz-keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
@-ms-keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
@-o-keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
@keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
/* wrap */
#wrap{width:auto;height:auto;margin:0 auto;position:relative;}
#wrap .box{width:280px;height:auto;padding:10px;border:none;float:left;}
#wrap .box .info{width:280px;height:auto;border-radius:8px;box-shadow:0 0 11px #666;background:#fff;}
#wrap .box .info .pic{width:260px;height:auto;margin:0 auto;padding-top:10px;}
#wrap .box .info .pic:hover{
-webkit-animation:shade 3s ease-in-out 1;
-moz-animation:shade 3s ease-in-out 1;
-ms-animation:shade 3s ease-in-out 1;
-o-animation:shade 3s ease-in-out 1;
animation:shade 3s ease-in-out 1;
}
#wrap .box .info .pic img{width:260px;border-radius:3px;}
#wrap .box .info .title{width:260px;height:40px;margin:0 auto;line-height:40px;text-align:center;color:#666;font-size:18px;font-weight:bold;overflow:hidden;}
</style>
<body>
<div id="wrap">
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/1.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/2.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/3.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/4.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/5.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/6.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/7.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/8.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/9.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/10.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js">
</script>
<script type="text/javascript">
window.onload = function(){
PBL('wrap','box');
var data = [
{'src':'1.jpg','title':'waterfall'},
{'src':'2.jpg','title':'waterfall'},
{'src':'3.jpg','title':'waterfall'},
{'src':'4.jpg','title':'waterfall'},
{'src':'5.jpg','title':'waterfall'},
{'src':'6.jpg','title':'waterfall'},
{'src':'7.jpg','title':'waterfall'},
{'src':'8.jpg','title':'waterfall'},
{'src':'9.jpg','title':'waterfall'},
{'src':'10.jpg','title':'waterfall'}
];
window.onscroll = function(){
if(getCheck()){
var wrap = document.getElementById('wrap');
for(i in data){
//create a new box
var box = document.createElement('div');
box.className = 'box';
wrap.appendChild(box);
//create info and append to box
var info = document.createElement('div');
info.className = 'info';
box.appendChild(info);
//create pic div and append to info
var pic = document.createElement('div');
pic.className = 'pic';
info.appendChild(pic);
//create img element and set it' source
var img = document.createElement('img');
img.src = 'images/'+data[i].src;
// img.src = data[i].src;
img.style.height = 'auto';
pic.appendChild(img);
//create title
var title = document.createElement('div');
title.className = 'title';
info.appendChild(title);
//create anchor
var a = document.createElement('a');
a.innerHTML = data[i].title;
title.appendChild(a);
}
PBL('wrap','box');
}
}
}
function PBL(wrap,box){
// 1.get elements
var wrap = document.getElementById(wrap);
var boxs = getClass(wrap,box);
// 2.get width of info
var boxW = boxs[2].offsetWidth;
console.log(boxW)
//get colunm number so we can know how many pics can place
var colsNum = Math.floor(document.documentElement.clientWidth/boxW);
wrap.style.width = boxW*colsNum+'px';//set the total width
// 3.create an array to
var everyH = [];//create an array to store the height of box
for (var i = 0; i < boxs.length; i++) {
if(i<colsNum){//when the first row are not filled
everyH[i] = boxs[i].offsetHeight;
}else{
var minH = Math.min.apply(null,everyH);//get the min width in array
var minIndex = getIndex(minH,everyH); //get the index of min width box
getStyle(boxs[i],minH,boxs[minIndex].offsetLeft,i);//place the new box
everyH[minIndex] += boxs[i].offsetHeight;//¸the height of minIndex box now aquired the new box
}
}
}
/**
* a method to get class
* warp [Obj] Íâ²ã
* className [Str] ˈ̞
*/
function getClass(wrap,className){
var obj = wrap.getElementsByTagName('*');
var arr = [];
for(var i=0;i<obj.length;i++){
if(obj[i].className == className){
arr.push(obj[i]);
}
}
return arr;
}
/**
get the index of min height box
*/
function getIndex(minH,everyH){
for(index in everyH){
if (everyH[index] == minH ) return index;
}
}
/**
* check if the scrolled over the last box
*/
function getCheck(){
var documentH = document.documentElement.clientHeight;
var scrollH = document.documentElement.scrollTop || document.body.scrollTop;
return documentH+scrollH>=getLastH() ?true:false;
// the last pic should be a little bit longer so can work when first ten pic onload complete
}
/**
* get the height of last box
*/
function getLastH(){
var wrap = document.getElementById('wrap');
var boxs = getClass(wrap,'box');
return boxs[boxs.length-1].offsetTop+boxs[boxs.length-1].offsetHeight;
}
/**
* method to place the new box
* box [obj]
* top [Num]
* left [Num]
* index [Num]
*/
var getStartNum = 0;//
//set the style of new box
function getStyle(box,top,left,index){
if (getStartNum>=index) return;
$(box).css({
'position':'absolute',
'top':top,
"left":left,
"opacity":"0"
});
$(box).stop().animate({
"opacity":"1"
},999);
getStartNum = index;//¸
}
</script>
</body>
</html>