跳到主要内容

1 篇博文 含有标签「layout」

查看所有标签

· 阅读需 4 分钟
GSemir

记录下瀑布流布局实现方案

生成指定大小的随机图片: https://picsum.photos/width/height

初始页面如下，共有 10 张宽度固定，高度随机的图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瀑布流</title>
</head>
<body>
  <div class="container"></div>
</body>
<script>
  // 生成随机图片
  const WIDTH = 300
  const HEIGHT_ARR = [200, 250, 300, 350, 400, 450, 500, 600]
  const getRandomUrl = () => {
    const height = HEIGHT_ARR[Math.floor(Math.random() * 8)]
    return `https://picsum.photos/${WIDTH}/${height}`
  }

  function generateImages(count = 10) {
    const container = document.querySelector('.container')
    for (let i = 0; i < count; i++) {
      const img = document.createElement('img')
      img.src = getRandomUrl()
      container.appendChild(img)
    }
  }

  generateImages()
</script>
</html>

方案一：纯 css 布局​

将 container 设置为 grid 布局，固定列宽

实现核心是 grid-template-rows: masonry;

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
  grid-gap: 10px;
}

caniuse 网站显示，至今只有最新版的 Safari 浏览器支持这一特性。。。

方案二：js 计算布局​

整体布局信息​

根据容器宽度和图片宽度，计算共有多少列，剩余空间平均分配，作为每列的间隙

function cal() {
  const containerWidth = container.clientWidth
  const columns = Math.floor(containerWidth / IMG_WIDTH) // 总列数
  const spaceNumber = columns + 1 // 间隙个数
  // 剩余空间平均分配，作为间隙
  const leftSpace = containerWidth - columns * IMG_WIDTH
  const space = leftSpace / spaceNumber
  return {
    space,
    columns
  }
}

元素的定位​

设置定位：容器 relative，图片 absolute

思路：维护一个数组，数组每项记录每列的当前高度，那么下一张照片就放在最小高度的那一列

  1. 用列数作为 length，初始化数组 nextTops，默认坐标为 0

  2. 循环每个 img 元素

    1. 找到 nextTops 中的最小高度，作为 img 的 top
    2. 更新该列的纵坐标（记得算上间隙）
    3. 根据更新列 nextTops 的 index 位置（用最小高度去找），计算图片的 left（加上间隙）
    4. 最后设置容器的高度为 nextTops 的最大值，即最大列高
// 以计算出来的列数为 length，初始化纵坐标数组，默认坐标为 0
const info = cal()
const nextTops = new Array(info.columns)
nextTops.fill(0)

// 循环每个 img 元素
for (let i = 0; i < container.children.length; i++) {
  const img = container.children[i]
  // 找到列中的最小高度，作为图片的 top
  const minTop = Math.min.apply(null, nextTops)
  img.style.top = minTop + 'px'
  // 更新该列的纵坐标（记得算上间隙）
  const index = nextTops.indexOf(minTop)
  nextTops[index] += img.height + info.space
  // 根据列的位置，计算图片的 left
  const left = (index + 1) * info.space + index * IMG_WIDTH
  img.style.left = left + 'px'
}

// 设置容器高度为最大纵坐标的列高
const max = Math.max.apply(null, nextTops)
container.style.height = max + 'px'

效果如下

image-20240807191539611