瀑布流效果

发布时间 2026-01-07 13:47:11
阅读量加载中...
效果预览

此演示仅在桌面端浏览器中可用
代码展示

     html
    
  
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>瀑布流效果</title>
    <style>
      .container {
        width: 80%;
        margin: 0 auto;
        display: flex;
        gap: 10px;
      }

      .inner {
        flex: 1;
      }

      .img {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
    </div>

    <script>
      function getRandomHeight(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      function getRandomColor() {
        const colors = [
          "#ff6b6b",
          "#4ecdc4",
          "#45b7d1",
          "#96ceb4",
          "#feca57",
          "#ff9ff3",
          "#54a0ff",
        ];
        return colors[Math.floor(Math.random() * colors.length)];
      }

      const columns = document.querySelectorAll(".inner");

      columns.forEach((column, columnIndex) => {
        for (let i = 1; i <= 10; i++) {
          const imgDiv = document.createElement("div");
          imgDiv.className = "img";

          const randomHeight = getRandomHeight(100, 300);
          imgDiv.style.height = randomHeight + "px";

          imgDiv.style.backgroundColor = getRandomColor();

          imgDiv.textContent = `${columnIndex + 1}-${i}`;

          column.appendChild(imgDiv);
        }
      });
    </script>
  </body>
</html>
#Flex #Css