css部分：
*{
margin:
0;
padding:
0;}
#cont{
margin:
0
auto;
position:
relative;}
.box{
float:
left;
padding:
5px;}
.imgbox{
width:
180px;
border:
solid
1px
#aaa;
padding:
6px;
border-radius:
4px;}
.imgbox img{
width:
180px;
display:
block;}
html部分：
<
div
id=
"cont"
>
<
div
class=
"box"
>
<
div
class=
"imgbox"
>
<
img
src=
"img/4.jpg"
/>
</
div
>
</
div
>
<
div
class=
"box"
>
<
div
class=
"imgbox"
>
<
img
src=
"img/2.jpg"
/>
</
div
>
</
div
>
<
div
class=
"box"
>
<
div
class=
"imgbox"
>
<
img
src=
"img/3.jpg"
/>
</
div
>
</
div
>
<
div
class=
"box"
>
<
div
class=
"imgbox"
>
<
img
src=
"img/1.jpg"
/>
</
div
>
</
div
>
//可以多写几个不然看不出效果图片要选高度不同的；
js部分
function
$(
ele){
return
document.
getElementById(
ele);
}
var
ocont =
$(
"cont");
var
abox =
document.
getElementsByClassName(
"box");
var
cWidth =
document.
documentElement.
clientWidth ||
document.
body.
clientWidth;
//获取当前屏幕一行能放下多少个图片
var
imgNum =
Math.
floor(
cWidth/
abox[
0].
offsetWidth);
//设置大框的宽度，让大框居中
setWidth();
//创建数组，用于存放第一行图片的高度
var
heightArr = [];
//遍历所有的abox（图片）
for(
var
i=
0;
i<
abox.
length;
i++){
//区分出第一行图片和其他图片
if(
i<
imgNum){
//将第一行图片的所有高度，存到数组内
heightArr.
push(
abox[
i].
offsetHeight);
}
else{
// 求得数组中的最小值：Math.min.apply(null,arr);
//找到数组中的最小值，也就是获取第一行图片的最小高度
var
minHeight =
Math.
min.
apply(
null,
heightArr);
//获取最小高度所在数组中的索引
var
minIndex =
heightArr.
indexOf(
minHeight);
//将除了第一行的图片之外，其他图片都使用定位布局
abox[
i].
style.
position =
"absolute";
//设置第二行的元素的top值为第一行高度的最小值
abox[
i].
style.
top =
minHeight +
"px";
//设置第二行的元素的left值为，第一行最小高度所在位置前的所有内容的宽度
abox[
i].
style.
left =
minIndex *
abox[
0].
offsetWidth +
"px";
//最后，改变数组的元素，将第一次的最小值加上放在下面的元素的高度
heightArr[
minIndex] =
heightArr[
minIndex] +
abox[
i].
offsetHeight;
}
}
function
setWidth(){
ocont.
style.
width =
imgNum*
abox[
0].
offsetWidth +
"px";
}