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

相关推荐
花海如潮淹1 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui