*{
margin:0;
padding:0;
}
#container{
width:1200px;
margin:auto;
/*background-color: black;*/
position:relative;
}
#container img{
width:188px;
}
.outer{
margin:5px;
padding:5px;
border:solid 1px #888;
border-radius: 5px;
width:188px;
position:absolute;
top:0;
transition:5s;
}
.box{
border:solid 1px #efefef;
overflow:hidden;
border-radius:5px;
}
![](images/img%20%281%29.jpg)
![](images/img%20%282%29.jpg)
![](images/img%20%283%29.jpg)
![](images/img%20%284%29.jpg)
![](images/img%20%285%29.jpg)
![](images/img%20%286%29.jpg)
![](images/img%20%287%29.jpg)
![](images/img%20%288%29.jpg)
![](images/img%20%289%29.jpg)
![](images/img%20%2810%29.jpg)
![](images/img%20%2811%29.jpg)
![](images/img%20%2812%29.jpg)
![](images/img%20%2813%29.jpg)
![](images/img%20%2814%29.jpg)
![](images/img%20%2815%29.jpg)
![](images/img%20%2816%29.jpg)
![](images/img%20%2817%29.jpg)
![](images/img%20%2818%29.jpg)
![](images/img%20%2819%29.jpg)
![](images/img%20%2820%29.jpg)
![](images/img%20%2821%29.jpg)
![](images/img%20%2822%29.jpg)
![](images/img%20%2823%29.jpg)
![](images/img%20%2824%29.jpg)
![](images/img%20%2825%29.jpg)
![](images/img%20%2826%29.jpg)
![](images/img%20%2827%29.jpg)
![](images/img%20%2828%29.jpg)
![](images/img%20%2829%29.jpg)
![](images/img%20%2830%29.jpg)
![](images/img%20%2831%29.jpg)
![](images/img%20%2832%29.jpg)
![](images/img%20%2833%29.jpg)
![](images/img%20%2834%29.jpg)
![](images/img%20%2835%29.jpg)
![](images/img%20%2836%29.jpg)
![](images/img%20%2837%29.jpg)
![](images/img%20%2838%29.jpg)
![](images/img%20%2839%29.jpg)
![](images/img%20%2840%29.jpg)
![](images/img%20%2841%29.jpg)
![](images/img%20%2842%29.jpg)
![](images/img%20%2843%29.jpg)
![](images/img%20%2844%29.jpg)
![](images/img%20%2845%29.jpg)
![](images/img%20%2846%29.jpg)
![](images/img%20%2847%29.jpg)
![](images/img%20%2848%29.jpg)
![](images/img%20%2849%29.jpg)
![](images/img%20%2850%29.jpg)
![](images/img%20%2851%29.jpg)
![](images/img%20%2852%29.jpg)
![](images/img%20%2853%29.jpg)
![](images/img%20%2854%29.jpg)
![](images/img%20%2855%29.jpg)
![](images/img%20%2856%29.jpg)
![](images/img%20%2857%29.jpg)
![](images/img%20%2858%29.jpg)
![](images/img%20%2859%29.jpg)
![](images/img%20%2860%29.jpg)
![](images/img%20%2861%29.jpg)
![](images/img%20%2862%29.jpg)
![](images/img%20%2863%29.jpg)
![](images/img%20%2864%29.jpg)
![](images/img%20%2865%29.jpg)
![](images/img%20%2866%29.jpg)
![](images/img%20%2867%29.jpg)
![](images/img%20%2868%29.jpg)
![](images/img%20%2869%29.jpg)
![](images/img%20%2870%29.jpg)
![](images/img%20%2871%29.jpg)
![](images/img%20%2872%29.jpg)
![](images/img%20%2873%29.jpg)
![](images/img%20%2874%29.jpg)
![](images/img%20%2875%29.jpg)
![](images/img%20%2876%29.jpg)
![](images/img%20%2877%29.jpg)
![](images/img%20%2878%29.jpg)
![](images/img%20%2879%29.jpg)
![](images/img%20%2880%29.jpg)
![](images/img%20%2881%29.jpg)
![](images/img%20%2882%29.jpg)
![](images/img%20%2883%29.jpg)
![](images/img%20%2884%29.jpg)
![](images/img%20%2885%29.jpg)
![](images/img%20%2886%29.jpg)
![](images/img%20%2887%29.jpg)
![](images/img%20%2888%29.jpg)
![](images/img%20%2889%29.jpg)
![](images/img%20%2890%29.jpg)
![](images/img%20%2891%29.jpg)
![](images/img%20%2892%29.jpg)
![](images/img%20%2893%29.jpg)
![](images/img%20%2894%29.jpg)
![](images/img%20%2895%29.jpg)
![](images/img%20%2896%29.jpg)
![](images/img%20%2897%29.jpg)
![](images/img%20%2898%29.jpg)
![](images/img%20%2899%29.jpg)
![](images/img%20%28100%29.jpg)
//
//window.onload方式将是一个良好的选择。window.onload是一个事件,当文档内容完全加载完成会触发该事件。
//onresize 事件会在窗口或框架被调整大小时发生。
window.onresize = function(){
//获取网页中所有的图片容器
var _outers = document.getElementsByClassName("outer");
//获取网页展示内容区域的宽度
// var _client_width = document.getElementById("container").offsetWidth;
// ===========================================
// 获取宽度,自动更改列
var _cw = document.body.offsetWidth;
var _container = document.getElementById('container');
_container.style.width = _cw * 0.8 + "px";
var _client_width = _container.offsetWidth;
console.log(_client_width);
// ================================================
//获取网页中图片容器的宽度
var _img_width = _outers[0].offsetWidth;
//计算一行能放几张图片
var _row_num = _client_width / _img_width;
//声明一个数组,记录每一列的高度
var _height = [];
//循环放置图片
for(var i=0;i<_outers.length>
if(i<_row_num>
//放置第一行图片
_outers[i].style.left = i * _img_width + "px";
_outers[i].style.top = 0 ;
//记录每一列的高度
_height.push(_outers[i].offsetHeight);
}else{
//获取最小高度
var _min_height = Math.min.apply(this,_height);
//获取索引位置
var _min_index = _height.indexOf(_min_height);
//定位图片位置
_outers[i].style.left = _min_index * _img_width + "px";
_outers[i].style.top = _min_height + "px";
//更新数组数据
_height[_min_index] += _outers[i].offsetHeight;
}
}
}