基于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博客

相关推荐
努力只为躺平2 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
Web小助手4 分钟前
大保剑:Promise的有趣体验
javascript
李大玄4 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵5 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
蓝倾10 分钟前
京东批量获取商品SKU操作指南
前端·后端·api
JSLove17 分钟前
常见 npm 报错问题
前端·npm
sunbyte17 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子18 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
知性的小mahua22 分钟前
vue3+canvas实现摄像头ROI区域标记
前端
嘗_38 分钟前
暑期前端训练day5
前端