使用 column-count 和 column-gap 属性实现瀑布流, 以及下拉加载更多数据模拟

 

 结果如图

源码

复制代码
<!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>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .box {
      width: 100%;
      padding: 10px;
      column-count: 3;
      column-gap: 10px;
    }

    .box div {
      width: 100%;
      margin-bottom: 10px;
    }

    .box div img {
      width: 100%;
      height: auto;
      vertical-align: middle;
    }

    .footer {
      height: 40px;
      background-color: orange;
    }
  </style>
</head>

<body>
  <div class="box">

  </div>
  <div class="footer"></div>

  <script>
    const box = document.querySelector('.box')
    const footer = document.querySelector('.footer')

    function mock() {
      return './0' + parseInt(Math.random() * 5 + 1) + '.png'
    }

    function loadMore() {
      const list = []
      for (let i = 0; i < 20; i++) {
        list.push(mock())
      }
      let html = ''
      list.forEach(i => {
        const div = document.createElement('div')
        div.innerHTML = `<img src=${i} />`
        box.appendChild(div)
      })
    }

    loadMore()

    var observer = new IntersectionObserver(() => {
      setTimeout(() => {
        loadMore()
      }, 1000)
    }, {});

    observer.observe(footer);

  </script>
</body>

</html>
复制代码

 

posted @   深海里的星星i  阅读(148)  评论(0)  编辑  收藏  举报
相关博文：
· js 实现代码雨效果
· 用html做的简版flip动画
· 2024-10-24 瀑布流（vue3）
· css实现瀑布流
· 瀑布流布局
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
历史上的今天：
2022-03-16 关于better-scroll的使用注意事项
2022-03-16 jquery-qrcode包生成带logo的二维码
点击右上角即可分享
微信分享提示