瀑布式显示图片

最新推荐文章于 2024-06-14 15:02:13 发布

Tfishupupup

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量161

点赞数

文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/Tfishupupup/article/details/126040861

版权

参考文章(2条消息) 瀑布流布局_盖玥希圈外男友(섭소우)的博客-CSDN博客

直接粘贴自己的代码了，因为参考文章里面作者已经讲的很清楚了，只是有一些判断方式不一样而已，修改了一下自己循环的条件判断。

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .container {
    width: 700px;
    height: 600px;
    background-color: red;
    /* overflow: auto; */
    margin: 0 auto;
    display: flex;

    align-items: flex-start
  }

  .col {
    flex-basis: 350px;
  }

  .col img {
    width: 100%;
  }
</style>

<body>
  <div class="container">
    <div class="left col">
      <!-- <img src="./案例/特斯拉改色/微信图片_20220516162017.jpg" alt=""> -->
    </div>
    <div class="right col"></div>
  </div>
</body>
<!-- 我的代码 -->
<script>
  let container = document.getElementsByClassName('container')
  let left = document.getElementsByClassName('col')[0]
  let right = document.getElementsByClassName('col')[1]
  // 加载第index张图片
  function loadIndexImg(index) {
    return new Promise((resolve, reject) => {
      // 当前加载的图片
      let img = new Image();
      img.src = "./案例/特斯拉改色/" + index + '.jpg'
      img.onload = () => {
        if (left.clientHeight == 0) {
          // console.log(1);
          left.appendChild(img)
        } else if (left.clientHeight >= right.clientHeight) {
          // console.log(2);
          right.appendChild(img)
        } else if (left.clientHeight < right.clientHeight) {
          // console.log(3);

          left.appendChild(img)
        } else {
          left.appendChild(img)

        }
        resolve();
      }
    })
  }

  // 插入图片
  async function initImg() {
    // 要在加载完并插入图片后才去判断下一张，因此采用async/await
    for (let i = 1; i <= 14; i++) {
      await loadIndexImg(i)
    }
  }

  initImg()

</script>
<!-- 参考文件代码修改了一部分 已注释 -->
<!-- <script>
  let container = document.getElementsByClassName('container')
  let left = document.getElementsByClassName('col')[0]
  let right = document.getElementsByClassName('col')[1]

  // 插入图片
  function initImg() {

    for (let i = 1; i < 14; i++) {
      let img = new Image();
      img.src = "./案例/特斯拉改色/" + i + '.jpg'
      console.log('left', left.clientHeight);
      console.log('right', right.clientHeight);
      // if (left.clientHeight >= right.clientHeight) {
      //   left.appendChild(img)
      // } else {
      //   right.appendChild(img)
      // }
      // right.appendChild(img)
      if (left.clientHeight == 0) {
        // console.log(1);
        left.appendChild(img)
      } else if (left.clientHeight >= right.clientHeight) {
        // console.log(2);
        right.appendChild(img)
      } else if (left.clientHeight < right.clientHeight) {
        // console.log(3);

        left.appendChild(img)
      } else {
        left.appendChild(img)

      }
    }
  }

  initImg()
</script> -->


</html>

下次在微信小程序里面修改了在看一下有没有问题