图片瀑布流

Qx_yyds

于 2022-03-07 15:37:02 发布

阅读量169

点赞数

分类专栏： JS 文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_60645608/article/details/123331752

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML、CSS和JavaScript实现图片瀑布流布局。通过计算图片的列数、间隙，以及设置图片的位置和容器的高度，实现了窗口大小变化时布局自适应的效果。涉及到的技术点包括绝对定位、事件监听、元素的加载以及函数防抖。

摘要由CSDN通过智能技术生成

html部分

  <title>图片瀑布流</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- 图片的容器 -->
    <div class="container"></div>
    <script src="./js/index1.js"></script>
  </body>
</html>

css部分

/* 图片的容器 */
.container{
  width: 90%;
  border: 1px solid #ccc;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}
/* 图片的样式 */
.container img {
  position: absolute;
  transition: all 0.5s;//动画的过渡
}

js部分

(function () {
  var container = document.querySelector(".container"); //容器元素
  var imgWidth = 220; //定义图片的宽度

  // 该方法可以计算出几列
  function cal() {
    var conrainerW = container.clientWidth; //盒子元素的宽度
    var columns = Math.floor(conrainerW / imgWidth); //获取到列数，因为宽度是固定的,向下取整
    var spaces = columns + 1; //间隙比列数多一个
    var space = (conrainerW - columns * imgWidth) / spaces; //计算出间隙的值
    return {
      //返回列数和间隙
      columns: columns,
      space: space,
    };
  }
  //获取数组中的最小值
  function getMin(arr) {
    var min = arr[0]; //假设第一个数为最小
    //通过循环 比较每一项 如果有小于假设的数 则为最小
    for (let i = 1; i < arr.length; i++) {
      if (arr[i] < min) {
        min = arr[i];
      }
    }
    return min; //返回最小
  }
  //获取数组中的最大值
  function getMax(arr) {
    var max = arr[0]; //假设第一个数最大
    //通过循环 比较每一项 如果有大于假设的数 则为最大
    for (let i = 1; i < arr.length; i++) {
      if (arr[i] > max) {
        max = arr[i];
      }
    }
    return max; //返回最大
  }
  //2.该方法用于设置每一张图片的位置
  function init() {
    // 在设置图片位置之前，我们首先需要知道几列
    var info = cal(); //获取到多少列和多少间隙
    var arr = new Array(info.columns); //创建数组，数组里面保存每一列的高度
    arr.fill(0); // 数组里面的每一项填充为 0
    //循环每一张图片
    for (var i = 0; i < container.children.length; i++) {
      var img = container.children[i]; //每一个图片
      var top = getMin(arr); //通过方法计算出数组中的最小值
      img.style.top = top + "px"; //给每一张图片top赋值 因为是绝对定位
      // 接下来有一个非常非常重要的事情，就是要改变当前列的高度
      var index = arr.indexOf(top); // // 首先找到这个最小数对应的列数
      arr[index] += img.height + info.space; //给对应下标累加图片的高度和间隙
      //确定left的值
      var left = (index + 1) * info.space + index * imgWidth; //间隙是比图片多一个的, 所以间隙+图片的宽度
      img.style.left = left + "px"; //赋值给left
    }
     因为图片是绝对定位，脱离了标准流，所以无法撑开盒子的高度
    // 那么我就手动来计算盒子的高度
    var maxTop = getMax(arr);
    container.style.height = maxTop + "px"; //给盒子添加内样式的高度
  }
  //绑定事件
  function bindEvent() {
    //绑定视口大小改变就会触发的事件， resize
    window.addEventListener("resize", function () {
      //函数防抖  因为resize 改变大小就会触发
      var timer = null; //声明定时器id 为null
      if (timer) {
        return; //如果有id  就不作处理
      }
      timer = setTimeout(function () {
        init(); //每隔1秒调用init方法设置每一张图片的位置
      }, 1000);
    });
  }
  //1.创建图片,并且对图片的位置进行归位
  function createImgs() {
    for (var i = 0; i <= 40; i++) {
      var src = "./img/" + i + ".jpg"; // 生成图片的 src 路径
      // var src = `../img/${i}.jpg`; 通过 ES6 的字符串模板语法
      var img = document.createElement("img"); //创建img元素
      img.src = src; //给img属性赋值
      img.style.width = imgWidth + "px"; //设置图片的宽度
      container.appendChild(img); //把img元素加到container容器中
      img.onload = init; //给图片绑定onload事件 元素的加载事件，当资源已加载时被触发
    }
  }

  /**
   * main 程序主函数
   */
  function main() {
    createImgs(); //创建图片函数
    bindEvent(); //绑定事件
  }
  //调用主函数
  main();
})();

Qx_yyds

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片瀑布流

html部分 <title>图片瀑布流</title> <link rel="stylesheet" href="./css/index.css" /> </head> <body>  <div class="container"></div> <script src="./js/index1.js"></script&gt
复制链接

扫一扫