使用js实现响应式瀑布流布局（附带动画效果）

4.进行判断如果i小于列数则将第一列的图片高度添加进数组然后设置style的top，left值控制其位置。5.如果i大于列数就说明是第二行，则找到上一行数组中高度最小的元素，根据其设置top，left值；1.获取图片容器的宽度，根据宽度的大小去控制列数的生成；2.定义间距变量，图片数组和计算出每列宽度；3.遍历图片元素数组，为每一项加上宽度；6.最后根据根据索引将每一项添加到数组。......

object not found

19727人浏览 · 2022-08-30 16:10:33

object not found · 2022-08-30 16:10:33 发布

效果图

思路

1.获取图片容器的宽度，根据宽度的大小去控制列数的生成；

2.定义间距变量，图片数组和计算出每列宽度；

3.遍历图片元素数组，为每一项加上宽度；

4.进行判断如果i小于列数则将第一列的图片高度添加进数组然后设置style的top，left值控制其位置

5.如果i大于列数就说明是第二行，则找到上一行数组中高度最小的元素，根据其设置top，left值；

6.最后根据根据索引将每一项添加到数组

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
      }

      .wrap {
        position: relative;
        margin: 10px;
        max-width: 1200px;
        margin: 0 auto;
      }

      .box {
        position: absolute;
        /* 图像灰度 */
        filter: grayscale(0.5);
        transition: left 0.5s, top 0.5s;
      }

      .box img {
        display: block;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/001.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/002.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/003.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/004.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/005.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/006.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/007.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/008.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/009.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/010.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/011.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/012.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/013.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/014.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/015.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/016.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/017.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/018.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/019.jpg" alt="" />
      </div>
      <div class="box">
        <img src="http://wlog.cn/demo/waterfall/images/020.jpg" alt="" />
      </div>
    </div>
    <script>
      // 根据元素宽度生成列数从而实现响应式
      function createColumns(ele) {
        let width = ele.offsetWidth;
        if (width >= 1200) {
          _column = 5;
        }

        if (width < 1200 && width >= 992) {
          _column = 4;
        }

        if (width < 992 && width >= 768) {
          _column = 3;
        }

        if (width < 768) {
          _column = 2;
        }
        if (width < 360) {
          _column = 1;
        }
        return _column;
      }
      function render() {
        let _wrap = document.querySelector(".wrap"); //父容器
        let _column = createColumns(_wrap); //列数
        let _spacing = 10; //间距
        let _colWidth =
          (_wrap.offsetWidth - (_column - 1) * _spacing) / _column; //列宽
        let _boxList = document.querySelectorAll(".box");
        let _arr = []; //高度数组
        for (let i = 0; i < _boxList.length; i++) {
          _boxList[i].style.width = _colWidth + "px";
          if (i < _column) {
            _arr.push(_boxList[i].offsetHeight); //将每一列的高度存放到_arr数组中
            _boxList[i].style.top = 0;
            _boxList[i].style.left = (_colWidth + _spacing) * i + "px";
          } else {
            let min = Math.min(..._arr); //最小高度
            let index = _arr.indexOf(min); //最小高度的索引
            _boxList[i].style.top = min + _spacing + "px"; //第二列居上距离
            _boxList[i].style.left = (_spacing + _colWidth) * index + "px"; //第二列居左距离
            _arr[index] += _boxList[i].offsetHeight + _spacing;
          }
        }
      }
      // 在网页上的资源全部加载完成后再运行代码
      window.addEventListener("load", render);
      // 窗口宽度改变
      window.addEventListener("resize", render);
    </script>
  </body>
</html>

csdn文章推荐受影响解决办法10个字10行

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

沃云统一开发平台介绍

沃云集成平台研发平台介绍1.平台优势2.平台原理3.研发平台使用方法4.遇到的问题5.现阶段实现的功能6.后续需要补充的功能和优化内容研发平台介绍1.平台优势解决孤岛式应用，实现能力共享；现有系统框架过于复杂，跨系统业务处理成本居高不下，协同服务共享，降低运维成本；提高项目应用资源监控能力，改善资源利用率；业务微服务化，快速发布、快速部署，快速响应业务需求变化；沃云平台不仅提供了自动化的、可快速部

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

云原生

基于docker的test-containers环境百宝箱

笔者语录：我开了个公众号【Java你我他】，欢迎大家关注。在很多时候，程序猿们更关注代码本身，而不愿意把时间花费在环境搭建上，这也是Docker变得越来越受欢迎的原因之一。test-containe是Docker生态圈中的一颗新星，其主要针对测试领域、背靠Docker实现环境百宝箱功能。 test-containers：你要的环境，我都有~ 假设我们现在需要一个redis-clust