<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
.box{
150px;
padding:5px;
float:left;
transition:all 500ms;
}
.box_img{
padding:5px
}
img{
100%;
border-radius:10px;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.3)
}
</style>
</head>
<body>
</body>
</html>
<script>
var imgs=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jpg","19.jpg","20.jpg"];
var st="";
function fn(){
for(var i=0;i<imgs.length;i++){
st+="<div class='box'>";
st+="<div class='box_img'>";
st+="<img src='./img/"+imgs[i]+"'/>"
st+="</div>";
st+="</div>";
}
document.body.innerHTML=st;
}
fn()
var list=document.getElementsByClassName("box");
function jiazai(){
var widwidth=document.documentElement.clientWidth||document.body.clientWidth;
var geshu=parseInt(widwidth/list[0].offsetWidth)
var height=[]
for(var i=0;i<list.length;i++){
if(i<geshu){
var s=height.push(list[i].offsetHeight)
list[i].style.position="static";
}
else{
var minheight=Math.min.apply(null,height)
var indexj=j
for(var j in height){
if(height[j]==minheight){
indexj=j;
break;
}
}
var boxlist=list[indexj];
list[i].style.position="absolute";
list[i].style.left=boxlist.offsetLeft+"px";
list[i].style.top=minheight+"px";
height[indexj]=minheight+list[i].offsetHeight;
}
}
}
window.onload=function(){
jiazai()
}
window.onresize=function(){
jiazai()
}
window.onscroll=function(){
var s=document.documentElement.clientHeight||document.body.clientHeight;
var c=document.documentElement.scrollTop||document.body.scrollTop;
var d=list[list.length-1].offsetTop;
if(s+c>d){
fn();
jiazai()
}
}
</script>