瀑布流

什么是瀑布流

又称为瀑布流布局，是一种比较经典的网站布局方式，尤其多见于图片较多的页面。常见有两种瀑布流方式。分别为

定宽不定高
定高不定宽

定宽不定高

定高不定宽

定宽不定高-思路

动态生成 1000 个 li 标签，设置统一的宽度设置透明度（实际开发中，只需要获取 1000 个图片对应的高度即可）
开启定时器，每一行只放 3 个 li 标签，三个 li 标签，按照正常顺序依次摆放即可，后面的 li 标签切换逻辑
每显示一个 li 标签，就需要自己维护好一个数组 [第 1 列的 li 标签高度集合，第 2 列的 li 标签高度集合，第 3 列的 li 标签高度集合]
统计出那一列最低和对应的下标(0,1,2)
将下一个 li 标签放在对应下标的位置，同时计算出下标对应列的高度总和，设置为即将显示的 li 标签的 top

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      li {
        width: 33.33%;
        border: 1px solid #000;
        font-size: 30px;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <ul></ul>
    <script>
      init();
      function init() {
        const ul = document.querySelector("ul");
        for (let index = 0; index < 1000; index++) {
          const li = document.createElement("li");
          li.innerText = index;
          li.style.backgroundColor = getRandomColor();
          li.style.height =
            Math.floor(Math.random() * (200 - 50 + 1) + 50) + "px";
          li.style.opacity = "0";
          ul.appendChild(li);
        }

        function getRandomColor() {
          const color1 = Math.floor(Math.random() * 256);
          const color2 = Math.floor(Math.random() * 256);
          const color3 = Math.floor(Math.random() * 256);
          return `rgb(${color1},${color2},${color3})`;
        }

        setWaterFall();
        function setWaterFall() {
          const lis = [...document.querySelectorAll("li")];
          let index = 0;
          const heightList = [[], [], []];
          const timeId = setInterval(() => {
            const li = lis.shift();
            if (!li) {
              clearInterval(timeId);
              return;
            }
            if (index < 3) {
              const left = index * li.clientWidth + "px";
              li.style.left = left;
              heightList[index].push(li.clientHeight);
            } else {
              // 计算出3个列分别对应的高度 [1,2,3]
              const sumHeightList = heightList.reduce(
                (sumColumnHeight, columnList) => [
                  ...sumColumnHeight,
                  columnList.reduce((a, b) => a + b, 0),
                ],
                []
              );
              const { minIndex, minHeight } = getMinIndex(sumHeightList);
              const left = minIndex * li.clientWidth + "px";
              const top = minHeight + "px";
              li.style.left = left;
              li.style.top = top;
              heightList[minIndex].push(li.clientHeight);
            }
            li.style.opacity = "1";
            index++;
          }, 500);
        }

        function getMinIndex(arr) {
          let minIndex = 0;
          let minHeight = arr[0];
          for (let index = 0; index < arr.length; index++) {
            const element = arr[index];
            if (minHeight > element) {
              minHeight = element;
              minIndex = index;
            }
          }
          return { minIndex, minHeight };
        }
      }
    </script>
  </body>
</html>

itcastWsy/h5-waterfall

瀑布流

什么是瀑布流

定宽不定高

定高不定宽

定宽不定高-思路

代码

效果