基于js css的瀑布流demo

news2024/11/14 16:17:35

要实现照片按照瀑布流展示，写个小demo，记录下。

瀑布流实现思路如下：

CSS 弹性布局对 3 列按横向排列，对每一列内部按纵向排列

html代码：

<div class="content"></div>

css代码：

.content {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: flex-start;
}

js代码：

    const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    const content = document.querySelector('.content');
    for (let i = 0; i < 3; i++) {
      const div = document.createElement('div');
      div.style.width = '210px';
      div.style.height = '100%';
      list.forEach(function (ele, index) {
        if (index % 3 == i) {
          const son = document.createElement('div')
          son.style.backgroundColor = randomColor();
          // 给盒子设置随机高度
          son.style.height = (Math.floor(Math.random() * (301 - 200)) + 200) + 'px';
          son.style.marginBottom = '10px';
          son.innerText = ele;
          div.appendChild(son);
        };
      });
      content.appendChild(div);
    };

    function randomColor() {
      var color = '#';
      for (var i = 0; i < 6; i++) {
        // 设置随机颜色
        color += Math.floor(Math.random() * 16).toString(16); // 生成0-F之间的随机十六进制字符
      };
      return color;
    };

运行之后效果图如👇所示：

整体代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .content {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }
  </style>
</head>

<body>
  <div class="content"></div>
  <script>
    const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    const content = document.querySelector('.content');
    for (let i = 0; i < 3; i++) {
      const div = document.createElement('div');
      div.style.width = '210px';
      div.style.height = '100%';
      list.forEach(function (ele, index) {
        if (index % 3 == i) {
          const son = document.createElement('div')
          son.style.backgroundColor = randomColor();
          // 给盒子设置随机高度
          son.style.height = (Math.floor(Math.random() * (301 - 200)) + 200) + 'px';
          son.style.marginBottom = '10px';
          son.innerText = ele;
          div.appendChild(son);
        };
      });
      content.appendChild(div);
    };

    function randomColor() {
      var color = '#';
      for (var i = 0; i < 6; i++) {
        // 设置随机颜色
        color += Math.floor(Math.random() * 16).toString(16); // 生成0-F之间的随机十六进制字符
      };
      return color;
    };
  </script>
</body>
</html>