【案例】原生js实现简易瀑布流布局

最新推荐文章于 2024-09-16 08:47:17 发布

柠檬霸~

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量103

点赞数 1

文章标签： javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_45119815/article/details/129640025

版权

该文章展示了如何使用HTML、CSS和JavaScript实现一个瀑布流布局。HTML部分包含多个嵌套在div中的图片，CSS设置了图片等宽不等高和div的浮动属性。JavaScript部分计算了每行能容纳的图片数量，并动态调整图片的位置，以形成瀑布流效果。

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

HTML部分

使用div嵌套img即可图片高度不同即可

<body>
  <div class="content">
    <div>
      <img src="../images/瀑布4.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布1.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布2.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布3.jpg" alt="">
    </div>

    <div>
      <img src="../images/瀑布5.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布6.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布3.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布7.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布4.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布6.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布3.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布7.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布5.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布6.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布3.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布7.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布5.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布6.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布3.jpg" alt="">
    </div>
    <div>
      <img src="../images/瀑布7.jpg" alt="">
    </div>
  </div>
  <script src="./瀑布流.js"></script>
</body>

CSS部分

图片等宽不等高，div全部浮动

* {
  margin: 0;
  padding: 0;
}
.content{
  width: 100%;
  height: 200%;
}
.content>div{
  float: left;
  padding: 10px;
}.content>div>img{
  width: 200px;
}

js部分

计算一行能容下几张图片

由于用户的屏幕尺寸宽度不一致，这里需要获取可视区宽度

 //获取容器的宽
  var content = document.querySelector('.content')
  var contentWidth = content.offsetWidth

获取单张图片宽度（每个所有图片宽度一致）

//获取单个照片的宽度
  var imgs = content.children //全部图片数组
  var imgWidth = imgs[0].offsetWidth

单行显示图片的数量（可视区宽度/单张图片）

  //计算一行图片数
  var nums = Math.floor(contentWidth / imgWidth)

**第一行无需考虑插入位置

第遍历全部图元元素数组，把第一行的元素高度存入新数组

求出数组中高度值最低元素和索引（默认为下表为0的元素定位最小高度）

循环高度数组依次和默认元素比较，小于则替换为最小高度

4.第一行除外的元素添加定位，

其余元素设置绝对定位，top值为第一行最低高度元素的高

left值为第一行高度最低元素offsetLeft的值

改变最低高度

//将第一行元素的高度存入数组
  var arrHeight = []
  for (var i = 0; i < imgs.length; i++) {
    if (i < nums) {//小于单行数量
      arrHeight.push(imgs[i].offsetHeight)
    } else {
      var obj = {
        minH: arrHeight[0],
        minI: 0,
      }
      //找到第一行高度最低的图片
      for (var j = 0; j < arrHeight.length; j++) {
        if (arrHeight[j] < obj.minH) {
          obj.minH = arrHeight[j]
          obj.minI = j
        }
      }
      //其余元素设置绝对定位，top值为第一行最低高度元素的高
      //left值为第一行高度最低元素offsetLeft的值
      //改变最低高度
      imgs[i].style.position = 'absolute'
      imgs[i].style.left = imgs[obj.minI].offsetLeft + 'px'
      imgs[i].style.top = obj.minH + 'px'
      arrHeight[obj.minI]+=imgs[i].offsetHeight;
    }
  }