基于js css的瀑布流demo

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

瀑布流实现思路如下:

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

html代码:

html 复制代码
<div class="content"></div>

css代码:

css 复制代码
.content {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: flex-start;
}

js代码:

javascript 复制代码
    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;
    };

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

整体代码:

html 复制代码
<!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>

推荐文章👇

5 种瀑布流场景的实现原理解析 - 知乎

实现瀑布流布局的四种方法-CSDN博客

相关推荐
excel1 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着1 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友3 小时前
什么是API签名?
前端·后端·安全
会豪5 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子5 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶5 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子5 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_5 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23335 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin6 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js