当前位置：首页 > news >正文

11. 瀑布流布局

news 2025/8/26 22:59:38

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>11.瀑布流布局</title><style>#container {position: relative;}img {position: absolute;}</style></head><body><div id="container"></div></body><script>var divContainer = document.getElementById('container')var imgWidth = 220 //每张图片的固定宽度//1. 加入图片元素function createImgs() {for (var i = 0; i <= 40; i++) {var height = Math.ceil(Math.random() * 100 + 200)var src = 'https://picsum.photos/220/' + height //生成图片的src路径var img = document.createElement('img')img.onload = setPoisionsimg.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) //将数组的每一项填充为0for (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 * imgWidthimg.style.left = left + 'px'}var max = Math.max.apply(null, nextTops) //求最大值divContainer.style.height = max + 'px' //3. 设置容器的高度}var timerId = null //一个计时器的idwindow.onresize = function () {//窗口尺寸变动后，重新排列if (timerId) {clearTimeout(timerId)}timerId = setTimeout(setPoisions, 300)}</script>
</html>