瀑布流布局 (HTML、JavaScript)

放手吧，别卷了

已于 2022-11-02 17:53:39 修改

阅读量445

点赞数

分类专栏：代码实现文章标签： javascript html 前端

于 2022-11-02 17:50:35 首次发布

本文链接：https://blog.csdn.net/weixin_45229447/article/details/127655943

版权

代码实现专栏收录该内容

6 篇文章 0 订阅

订阅专栏

原生HTML和JS实现瀑布流布局的大概思路，效果和代码如下

<!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>

<body>
  <div class="list">
    <div class="leftList"></div>
    <div class="rightList"></div>
  </div>
  <script>
    var page = 1;
    var listLeft = [];
    var listRight = [];
    var leftHeight = 0;
    var rightHeight = 0;
    var loading = false;

    //初始加载
    getList();

    document.getElementsByClassName('list')[0].addEventListener('scroll', function (e) {
      // 滚动视口高度(也就是当前元素的真实高度)
      let scrollHeight = e.target.scrollHeight;
      // 可见区域高度
      let clientHeight = e.target.clientHeight
      // 滚动条顶部到浏览器顶部高度
      let scrollTop = e.target.scrollTop;
      if (clientHeight + scrollTop + 50 >= scrollHeight) {
        if (loading == true) return;
        loading = true;
        page += 1;
        getList()
      }
    })

    //请求图片列表并渲染
    function getList() {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", `https://picsum.photos/v2/list?page=${page}&limit=10`, true);
      xmlhttp.send();
      // readyState == 4 为请求完成，status == 200为请求成功返回的状态
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          console.log('JSON.parse(xmlhttp.responseText)', JSON.parse(xmlhttp.responseText))
          JSON.parse(xmlhttp.responseText).forEach(item => {
            if (leftHeight <= rightHeight) {
              var showHeight = item.height * (300 / item.width);
              item.showHeight = showHeight;
              listLeft.push(item);
              leftHeight += showHeight;
            } else {
              var showHeight = item.height * (300 / item.width);
              item.showHeight = showHeight;
              listRight.push(item)
              rightHeight += showHeight;
            }
          });

          var leftListText = ''
          listLeft.forEach(iteml => {
            leftListText += `<img src=${iteml.download_url} style='height:${iteml.showHeight}px' alt='正在加载' />`
          })
          document.getElementsByClassName("leftList")[0].innerHTML = leftListText;


          var rightListText = ''
          listRight.forEach(itemr => {
            rightListText += `<img src=${itemr.download_url} style='height:${itemr.showHeight}px' alt='正在加载' />`
          })
          document.getElementsByClassName("rightList")[0].innerHTML = rightListText;

          loading = false;
        }
      }
    }

  </script>
</body>
<style>
  .list {
    display: flex;
    width: 620px;
    height: 90vh;
    overflow: auto;
    background: #e9e9e9;
    margin: 5vh auto 0;
    
  }

  .leftList,
  .rightList {
    width: 300px;
  }

  img {
    width: 300px;
  }
</style>

</html>