目录结构:
只需要在img里面放入图片就ok
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.container {
width: 90%;
margin: 0 auto;
/* border: 2px solid; */
position: relative;
}
.container img {
position: absolute;
/* css3属性,表示过渡效果, 图片的样式变化在0.3秒内完成,而不是瞬间完成 */
transition: 0.3s;
width: 220px;
}
</style>
</head>
<body>
<div id="container" class="container"></div>
<script src="./index.js"></script>
</body>
</html>
js代码:
var divContainer = document.getElementById('container');
var imgWidth = 220; //每张图片的固定宽度
//1. 加入图片元素
function createImgs() {
for (var i = 0; i <= 40; i++) {
var src = 'img/' + i + '.jpg'; //生成图片的src路径
var img = document.createElement('img');
img.onload = setPoisions;
img.src = src; //设置src路径
divContainer.appendChild(img); //添加到容器中
}
}
createImgs();
// 2. 设置每张图片的位置
function setPoisions() {
/**
* 计算一共有多少列,以及每一列之间的间隙
*/
function cal() {
var containerWidth = divContainer.clientWidth; //容器的宽度
//计算列的数量
var columns = Math.floor(containerWidth / imgWidth);
//计算间隙
var spaceNumber = columns + 1; //间隙数量
var leftSpace = containerWidth - columns * imgWidth; //计算剩余的空间
var space = leftSpace / spaceNumber; //每个间隙的空间
return {
space: space,
columns: columns,
};
}
var info = cal(); //得到列数,和 间隙的空间
var nextTops = new Array(info.columns); //该数组的长度为列数,每一项表示该列的下一个图片的纵坐标
nextTops.fill(0); //将数组的每一项填充为0
for (var i = 0; i < divContainer.children.length; i++) {
var img = divContainer.children[i];
//找到nextTops中的最小值作为当前图片的纵坐标
var minTop = Math.min.apply(null, nextTops);
img.style.top = minTop + 'px';
//重新设置数组这一项的下一个top值
var index = nextTops.indexOf(minTop); //得到使用的是第几列的top值
nextTops[index] += img.height + info.space;
//横坐标
var left = (index + 1) * info.space + index * imgWidth;
img.style.left = left + 'px';
}
var max = Math.max.apply(null, nextTops); //求最大值
divContainer.style.height = max + 'px'; //3. 设置容器的高度
}
var timerId = null; //一个计时器的id
window.onresize = function () {
//窗口尺寸变动后,重新排列
if (timerId) {
clearTimeout(timerId);
}
timerId = setTimeout(setPoisions, 300);
};
下载地址:https://download.csdn.net/download/m0_57033755/88664684