<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>
瀑布流
</title>
<style>
*{
font-size: 12px;
}
.bar{
margin: 5px auto;
width: 1016px;
height: 20px;
border: 1px solid #000;
}
#process{
width: 10%;
height: 100%;
background-color: #ff0000;
}
.flow{
margin: auto;
width: 1016px;
position: relative;
border: 1px solid #000;
height: 2500px;
}
.flow img{
width: 250px;
}
.box{
position: absolute;
overflow: hidden;
width: 250px;
box-shadow: 0 1px 2px 0 rgba(180,180,180,.5);
background: #fff;
border-radius: 2px;
}
.box img{
width: 250px;
height: auto;
}
.box img:hover{
opacity: 0.8;
filter: alpha(opacity=80);
}
.message {
margin: 0px 10px 11px;
padding-top: 11px;
overflow: hidden;
height: 18px;
color: #444;
line-height: 18px;
}
.message label{
color:#999;
}
.message a{
height: 18px;
color: #444;
text-decoration: none;
padding: 0 4px;
display: inline-block;
zoom: 1;
border-radius: 2px;
background-color: #f2f2f2;
margin-right: 8px;
}
.message a:hover{
color: #fff;
background-color: #e5461c;;
}
</style>
<script>
var tags=["甜素纯","车模","长腿美女","街拍","时尚","写真","小清新",
"清纯","学生妹","唯美","甜美","萝莉","女仆装","兔女郎"];
var lefts=[0+2,251+4,251*2+6,251*3+8];
var tops =[0+2,0+2,0+2,0+2];
var boxs =[];
var imageCount=0;
//图片加载完成计数
function fnCountImage(){
imageCount++;
var process = document.getElementById("process");
var p = 100*imageCount/35;
process.style.width= p.toFixed(0)+"%";
if(imageCount==35){
fnInit();
}
}
function fnLoadImage(){
for(var i=1;i<=35;i++) {
var box = fnCreateImageBox(i);
boxs.push(box);
}
}
//初始化图片的定位
function fnInit(){
for(var i=0;i<boxs.length;i++){
var box = boxs[i];
if(i<4){
//定位
box.style.left=lefts[i]+"px";
box.style.top=tops[i]+"px";
//修改列的高度
tops[i]+=box.offsetHeight+2;
}else{
//找最短的高度
//var minHeight = Math.min(tops[0],tops[1],tops[2],tops[3]);
var minHeight = Math.min.apply(null,tops);
//找最短的高度所在的列
var index = 0;
for(var j=0;j<tops.length;j++){
if(minHeight==tops[j]){
index=j;
break;
}
}
//定位
box.style.left=lefts[index]+"px";
box.style.top=tops[index]+"px";
//修改列的高度
tops[index]+=box.offsetHeight+2;
}
}
}
function fnCreateImageBox(imgNO){
/*
<div class="box">
<img src="pic/p01.jpg"/>
<p class="message">
<label>标签：</label>
<a href="#">甜素纯</a>
<a href="#">车模</a>
<a href="#">长腿美女</a>
</p>
</div>
*/
var div = document.createElement("div");
div.className="box";
var img = document.createElement("img");
var imgNO = imgNO<10 ? ("0"+imgNO) : imgNO;
img.setAttribute("src","pic/p"+imgNO+".jpg");
img.onload = fnCountImage;
div.appendChild(img);
var p = document.createElement("p");
p.className="message";
div.appendChild(p);
var label = document.createElement("label");
label.appendChild(document.createTextNode("标签："));
p.appendChild(label);
var count = fnRand(1,4);
for(var i=0;i<count;i++){
var a = document.createElement("a");
a.setAttribute("href","javascript:void(0)");
var text = tags[fnRand(0,tags.length-1)];
a.appendChild(document.createTextNode(text));
p.appendChild(a);
}
document.getElementById("pics").appendChild(div);
return div;
}
function fnRand(min,max){
return Math.floor(Math.random()*(max-min+1))+min;
}
window. fnLoadImage;
</script>
</head>
<body>
<div class="bar"><div id="process"></div></div>
<div id="pics" class="flow"></div>
</body>
</html>