效果图：
代码：
html：
无标题文档
css:
@charset utf-8;
/* css document */
*{
margin:0px;
padding:0px;
}
#container{
position:relative;
}
.box{
padding:5px;
float:left;
}
.box-img{
padding:5px;
boder:1px solid #cccccc;
box-shadow:0 0 5px #ccc;
boder-radius:5px;
}
.box-img img{
width:150px;
height:auto;
}
js:
// javascript document
window.onload=function(){
imglocation(container,box);
var imgdata={data:[{src:img-703fa08f5cbcc824355f275d07e1d2a6.jpg},{src:img-703fa08f5cbcc824355f275d07e1d2a6.jpg},{src:img-703fa08f5cbcc824355f275d07e1d2a6.jpg},{src:img-703fa08f5cbcc824355f275d07e1d2a6.jpg},{src:img_20160718_161944.jpg}]};
window.onscroll=function(){
if(checkflag()){
var cparent=document.getelementbyid(container);
for(var i=0;i var ccontent=document.createelement(div);
ccontent.classname=box;
cparent.appendchild(ccontent);
var boximg=document.createelement(div);
boximg.classname=box-img;
ccontent.appendchild(boximg);
var img=document.createelement(img);
img.src=file:///c|/users/lenovo/desktop/网页设计/图片/+imgdate.date[i].src;
boximg.appendchild(img);
}
imglocation(container,box);
}
}
}
function checkflag(){
var cparent=document.getelementbyid(container);
var ccontent=getchildelement(cparent,box);
var lastcontentheight=ccontent[ccontent.length-1].offsettop;
var scrolltop=document.documentelement.scrolltop||document.body.scrolltop;
var pageheight=document.documentelement.clientheight||document.body.clientheight;
if(lastcontentheight return true;
}
}
//获得屏幕图片数量
function imglocation(parent,content){
//父级parent的内容全部取出（既取box）
var cparent=document.getelementbyid(parent);
var ccontent=getchildelement(cparent,content);
//console.log(ccontent);盒子个数
var imgwidth=ccontent[0].offsetwidth;//图片的宽度
var m=document.documentelement.clientwidth;//屏幕的有效宽度
var cols=math.floor(m/imgwidth);//屏幕宽度除以图片宽度
cparent.style.csstext=width:+imgwidth*cols+px;margin:0 auto;//container一行的宽度
var boxheightarr=[];
for(var i=0;i if(i boxheightarr[i]=ccontent[i].offsetheight;
}else{
var minheight=math.min.apply(null,boxheightarr);
var minindex=getminheightlocation(boxheightarr,minheight);
ccontent[i].style.position=absolute;//绝对
ccontent[i].style.top=minheight+px;
ccontent[i].style.left=ccontent[minindex].offsetleft+px;
boxheightarr[minindex]=boxheightarr[minindex]+ccontent[i].offsetheight;
}
}
}
//
function getminheightlocation(boxheightarr,minheight){
for(var i in boxheightarr){
if(boxheightarr[i]==minheight){
return i;
}
}
}
//存储box
function getchildelement(parent,content){
var contentarr=[];
//通过父得到子集
var allcontent=parent.getelementsbytagname(*);
//classname与“box相同”，堆加
for(var i=0;i if(allcontent[i].classname==content){
contentarr.push(allcontent[i]);
}
}
return contentarr;
}