用JS简单实现图片瀑布流 + 无限瀑布流效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  * {
     
     
    position: relative;
    /* margin:0px;
        padding: 0px; */
  }

  img {
     
     
    display: block;
    width: 220px;
  }

  #box {
     
     
    margin: 0px auto;
  }

  .item {
     
     
    box-shadow: 2px 2px 2px #999999;
    /*设置为绝对定位,js通过top,left固定每个图片的位置*/
    position: absolute;
  }
</style>

<body>
  <div id="box">
    <img class="item" src="./images/31.jpg" alt="" />
    <img class="item" src="./images/12.jpg" alt="" />
    <img class="item" src="./images/22.jpg" alt="" />
    <img class="item" src="./images/13.jpg" alt="" />
    <img class="item" src="./images/14.jpg" alt="">
    <img class="item" src="./images/5.jpg" alt="">
    <img class="item" src="./images/6.jpg" alt="">
    <img class="item" src="./images/4.jpg" alt="">
    <img class="item" src="./images/27.jpg" alt="">
    <img class="item" src="./images/28.jpg" alt="">
  </div>
  <script>
    // img图片资源,有时加载耗时比较长,js中直接获取拿不到一些属性
    window.onload = function () {
     
     
      // 1 获取节点
      let boxObj = document.getElementById('box');
      // 如果使用query获取,每次追加则要重新获取图片节点
      let imgsObj = document.querySelectorAll('.item');

      // 使用getElements则不用
      //let imgsObj = document.getElementsByClassName('item');

      // 2 计算页面中能显示几列
      // 2-1 获取当前可视区域宽度
      let cliW = window.innerWidth || document.body.clientWidth;
      // 2-2 获取图片的宽度
      let imgW = imgsObj[0].offsetWidth;
      //console.log(cliW);
      let col = parseInt(cliW / imgW);

      // console.log(col);

      // 左右和上下间隔
      let leftM = 10;
      let topM = 10;


      waterFull();

      // 控制图片的显示
      function waterFull() {
     
     
        imgsObj = document.querySelectorAll('.item');
        // 保存图片高度
        let imgHArr = [];
        //1 遍历所有的图片
        Array.from(imgsObj).forEach((img, key) => {
     
     
          //  console.log(img);
          if (key < col) {
     
      // 第一排图片
            // top值为0
            img.style.left = (imgW + leftM) * key + 'px';
            // 图片高度和数组中元素是一一对应的
            imgHArr.push(img.offsetHeight);
          } else {
     
        // 非第一排
            // 2 找到所有元素中,最小的值

            //2-1 假设最小值,同时添加索引
            let min = imgHArr[0];
            let minIndex = 0;
            imgHArr.forEach((vv, kk) => {
     
     
              // 比较当前元素和循环元素
              if (min > vv) {
     
     
                min = vv; // 交换最小值
                minIndex = kk;
              }
            });
            //console.log(min, minIndex);
            // 给最短的一列追加图片
            img.style.left = imgsObj[minIndex].offsetLeft + 'px';
            img.style.top = min + topM + 'px';
            // 更新图片高度数组
            imgHArr[minIndex] = min + img.offsetHeight + topM;
          }

        });

        //console.log(imgHArr);

      }

      /*******无限加载的实现******/
      // 获取可视区高度
      let cliH = window.innerHeight;
      //console.log(cliH);
      let imgArr = [
        './images/yan.jpg',
        './images/wang.jpg',
        './images/40.jpg',
        './images/he.jpg',
        './images/37.jpg',
        './images/41.jpg',
        './images/40.jpg',
        './images/xing.jpg'
      ];
      //2 滚动条事件
      window.onscroll = function () {
     
     
        // 内容高度
        let contH = imgsObj[imgsObj.length - 1].offsetTop;
        // 滚动条高度
        let scroll = document.documentElement.scrollTop;
        //console.log(scroll);

        // 判断内容高度,是否小于滚动条+可视区域高度
        if (contH < (cliH + scroll)) {
     
     
          //   console.log(1111);
          let imgTag = '';
          imgArr.forEach((img) => {
     
     
            imgTag += '<img src=' + img + ' class="item">';
          });
          // 追加到box中
          // console.log(imgTag);
          box.innerHTML += imgTag
          waterFull();

        }

      }
    }

  </script>
</body>

</html>
用JS简单实现图片瀑布流 + 无限瀑布流效果

猜你喜欢
