JS—实现瀑布流效果

xiaobai_qxjn

于 2023-07-11 20:01:53 发布

阅读量385

点赞数

文章标签： javascript 前端 html css3 css

本文链接：https://blog.csdn.net/xiaobai_qxjn/article/details/131668047

版权

JS—实现瀑布流效果

实现效果

在这里插入图片描述

实现思路：通过页面判断宽度来构造数组的长度，寻找数组的最小值下标，来插入图片

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>瀑布流布局</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        background: url("./images/1.jpg");
        background-attachment: fixed;
        background-size: cover;
      }
      .contain {
        margin: 0 auto;
        width: 768px;
        position: relative;
      }
      img {
        position: absolute;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="contain">
      <img src="./images/5.jpg" alt="" srcset="" />
      <img src="./images/6.jpg" alt="" srcset="" />
      <img src="./images/1.jpg" alt="" srcset="" />
      <img src="./images/2.jpg" alt="" srcset="" />
      <img src="./images/111.jpg" alt="" srcset="" />
      <img src="./images/5.jpg" alt="" srcset="" />
      <img src="./images/333.jpg" alt="" srcset="" />
      <img src="./images/4.jpg" alt="" />
      <img src="./images/222.jpeg" alt="" srcset="" />
      <img src="./images/444.jpeg" alt="" srcset="" />
      <img src="./images/333.jpg" alt="" srcset="" />
      <img src="./images/555.jpeg" alt="" srcset="" />
    </div>
    <script>
      window.addEventListener("load", () => {
        let imgWidthKI = 8; // 页面宽度与图片宽度的比列
        setInterval(() => {
          let t = document
            .querySelector(".contain")
            .getBoundingClientRect().width;
          let imgWidth = Math.floor(
            document.documentElement.clientWidth / imgWidthKI
          );
          waterfall(t, imgWidth);
        }, 1000);

        function startArrayValue(array) {
          // 对创建的数组设置初始值
          for (let index = 0; index < array.length; index++) {
            array[index] = 0;
          }
        }
        function getArrayIndex(array) {
          // 求出当前数组中的最小位置索引
          const minIndex = array.indexOf(Math.min(...array));
          return minIndex;
        }
        function waterfall(divWidth, imgWidth) {
          let containWidth = divWidth;
          let imgList = document.querySelectorAll("img");
          let imgElementWidth = imgList[0].clientWidth; // 获取每一个Img 标签的宽度
          const col = Math.floor(containWidth / imgElementWidth); // 获取当前应该多少列
          let DivContain = new Array(col);
          startArrayValue(DivContain);
          let interval = Number(
            ((containWidth % imgElementWidth) / (col + 1)).toFixed(3)
          ); // 对间隔的值进行保留三位小数
          // 设置每一个元素的位置，且间隔的值为多少
          for (let index = 0; index < imgList.length; index++) {
            const element = imgList[index];
            const insertIndex = getArrayIndex(DivContain);
            element.style.width = `${imgWidth}px`;
            element.style.left = `${
              interval * (insertIndex + 1) + imgElementWidth * insertIndex
            }px`;
            element.style.top = `${DivContain[insertIndex] + 20}px`;
            // 同时，将高度，添加到数组里面
            DivContain[insertIndex] += element.clientHeight + 20;
          }
        }
      });
    </script>
  </body>
</html>