JS实现waterfall

最新推荐文章于 2024-08-20 09:09:02 发布

Zhi.C.Yue

最新推荐文章于 2024-08-20 09:09:02 发布

阅读量1k

点赞数

分类专栏：学习文章标签： js

本文链接：https://blog.csdn.net/Jacoh/article/details/99688780

版权

学习专栏收录该内容

50 篇文章 0 订阅

订阅专栏

js 实现waterfall

引用：https://github.com/Krryxa/krry_wallpaper

代码：

<!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>Img js</title>

  <style>
    .masonry {
      width: 100%;
      position: relative;
    }

    .item {
      z-index: 10;
      transition: .25s;
      overflow: hidden;
      position: absolute;
    }

    .item img {
      width: 100%;
      height: 100%;
      transition: .25s;
    }

    .item:hover img {
      z-index: 100;
      transition: .25s;
      overflow: hidden;
      animation: bounceIn .25s ease-in 2 alternate;
    }

    @keyframes bounceIn {
      100% {
        transform: scale(1.07);
      }
    }
  </style>

</head>

<body>

  <div class="masonry">
    <div class="item">
      <img class="lazy" src="/img/769df24a75dc4146.jpg" alt="">
    </div>
    <div class="item">
      <img class="lazy" src="/img/8f8cbf44b7f2f750.jpg" alt="">
    </div>
    <div class="item">
      <img class="lazy" src="/img/92094defb368e7f2.jpg" alt="">
    </div>
    <div class="item">
      <img class="lazy" src="/img/c2b843b414977435.jpg" alt="">
    </div>
    <div class="item">
      <img class="lazy" src="/img/c6e846a3390ce300.jpg" alt="">
    </div>
    <div class="item">
      <img class="lazy" src="/img/640e766c7c6499f2.jpg" alt="">
    </div>
    <div class="item">
      <img class="lazy" src="/img/3f05c95d3e4c4cc0.jpg" alt="">
    </div>
    <div class="item">
      <img class="lazy" src="/img/de9b8d90895134da.jpg" alt="">
    </div>
    <div class="item">
      <img class="lazy" src="/img/ac1025432d967024.jpg" alt="">
    </div>
    <div class="item">
      <img class="lazy" src="/img/306818e65b4f1410.jpg" alt="">
    </div>
    <div class="item">
      <img class="lazy" src="/img/d36357ab0ae5dd5e.jpg" alt="">
    </div>
    <div class="item">
      <img class="lazy" src="/img/d360438a93cf93cb.jpg" alt="">
    </div>
  </div>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  <script>

    //瀑布流效果
    //这里有一个坑（已经修复）：
    //因为是动态加载远程图片，在未加载完全无法获取图片宽高
    //未加载完全就无法设定每一个item(包裹图片)的top。

    //item的top值：第一行：top为0
    //            其他行：必须算出图片宽度在item宽度的缩小比例，与获取的图片高度相乘，从而获得item的高度
    //                   就可以设置每张图片在瀑布流中每块item的top值（每一行中最小的item高度，数组查找）
    //item的left值：第一行：按照每块item的宽度值*块数
    //             其他行：与自身上面一块的left值相等
    function waterFall() {
      // 1- 确定图片的宽度 - 滚动条宽度
      var pageWidth = getClient().width - 8;
      var columns = 3; //3列
      var itemWidth = parseInt(pageWidth / columns); //得到item的宽度
      $(".item").width(itemWidth); //设置到item的宽度

      var arr = [];

      $(".masonry .item").each(function (i) {
        var height = $(this).find("img").height();
        var width = $(this).find("img").width();
        var bi = itemWidth / width; //获取缩小的比值
        var boxheight = parseInt(height * bi); //图片的高度*比值 = item的高度

        if (i < columns) {
          // 2- 确定第一行
          $(this).css({
            top: 0,
            left: (itemWidth) * i
          });
          arr.push(boxheight);

        } else {
          // 其他行
          // 3- 找到数组中最小高度  和 它的索引
          var minHeight = arr[0];
          var index = 0;
          for (var j = 0; j < arr.length; j++) {
            if (minHeight > arr[j]) {
              minHeight = arr[j];
              index = j;
            }
          }
          // 4- 设置下一行的第一个盒子位置
          // top值就是最小列的高度 
          $(this).css({
            top: arr[index],
            left: $(".masonry .item").eq(index).css("left")
          });

          // 5- 修改最小列的高度 
          // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
          arr[index] = arr[index] + boxheight;
        }
      });
    }

    //clientWidth 处理兼容性
    function getClient() {
      return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      }
    }

    // 页面尺寸改变时实时触发
    window.onresize = function () {
      //重新定义瀑布流
      waterFall();
    };

    //初始化
    window.onload = function () {
      //实现瀑布流
      waterFall();
    }
  </script>
</body>

</html>