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

相关推荐
excel9 分钟前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip36 分钟前
JavaScript事件流
前端·javascript
小菜全1 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C1 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG1 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904271 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路1 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架
aaaweiaaaaaa1 小时前
HTML和CSS学习
前端·css·学习·html
秋秋小事1 小时前
React Hooks useContext
前端·javascript·react.js
Jinuss1 小时前
Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
前端·vue3