jQuery中瀑布流与分页的实现在实际的项目中，我们经常会遇到瀑布流的需求，我们可以通过以下两个jQuery插件实现。

在实际的项目中，我们经常会遇到瀑布流的需求，我们可以通过以下两个jQuery插件实现。

masonry插件（用于瀑布流的实现） github： github.com/desandro/ma…
jquery.imagesloaded (用于监听图片是否已经加载完，加载完之后在执行masonry插件)
监听滚动事件，实现分页

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JS Bin</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.min.js"></script>
  </head>
  <body>
    <ol id="container">
      <li class="item">
        <image
          class="image"
          src="https://i.loli.net/2021/01/24/CTjiMXvOrGpARnd.png"
        ></image>
      </li>
      <li class="item">
        <image
          class="image"
          src="https://i.loli.net/2021/01/24/fCkFXK63EZzDIWN.jpg"
        ></image>
      </li>
      <li class="item">
        <image
          class="image"
          src="https://i.loli.net/2021/01/24/CTjiMXvOrGpARnd.png"
        ></image>
      </li>
      <li class="item">
        <image
          class="image"
          src="https://i.loli.net/2021/01/24/CTjiMXvOrGpARnd.png"
        ></image>
      </li>
      <li class="item">
        <image
          class="image"
          src="https://i.loli.net/2021/01/24/CTjiMXvOrGpARnd.png"
        ></image>
      </li>
      <li class="item">
        <image
          class="image"
          src="https://i.loli.net/2021/01/24/fCkFXK63EZzDIWN.jpg"
        ></image>
      </li>
      <li class="item">
        <image
          class="image"
          src="https://i.loli.net/2021/01/24/CTjiMXvOrGpARnd.png"
        ></image>
      </li>
      <li class="item">
        <image
          class="image"
          src="https://i.loli.net/2021/01/24/CTjiMXvOrGpARnd.png"
        ></image>
      </li>
      <li class="item">
        <image
          class="image"
          src="https://i.loli.net/2021/01/24/CTjiMXvOrGpARnd.png"
        ></image>
      </li>
      <li class="item">
        <image
          class="image"
          src="https://i.loli.net/2021/01/24/fCkFXK63EZzDIWN.jpg"
        ></image>
      </li>
      <li class="item">
        <image
          class="image"
          src="https://i.loli.net/2021/01/24/CTjiMXvOrGpARnd.png"
        ></image>
      </li>
      <li class="item">
        <image
          class="image"
          src="https://i.loli.net/2021/01/24/CTjiMXvOrGpARnd.png"
        ></image>
      </li>
      <li class="item">
        <image
          class="image"
          src="https://i.loli.net/2021/01/24/CTjiMXvOrGpARnd.png"
        ></image>
      </li>
      <li class="item">
        <image
          class="image"
          src="https://i.loli.net/2021/01/24/fCkFXK63EZzDIWN.jpg"
        ></image>
      </li>
      <li class="item">
        <image
          class="image"
          src="https://i.loli.net/2021/01/24/CTjiMXvOrGpARnd.png"
        ></image>
      </li>
      <li class="item">
        <image
          class="image"
          src="https://i.loli.net/2021/01/24/fCkFXK63EZzDIWN.jpg"
        ></image>
      </li>
    </ol>

    <style>
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      ol,
      ul {
        list-style: none;
      }
      .image,
      .item {
        width: 50%;
        height: auto;
      }
    </style>

    <script>
      $("#container")
        .imagesLoaded()
        .progress(function () {
          $("#container").masonry({
            itemSelector: ".item",
            columnWidthL: ".item"
          });
        });

        window.onscroll = function() {
    if ((window.innerHeight + Math.ceil(window.pageYOffset + 1)) >= document.body.scrollHeight) {
      const $dom = $('<li class="item"><image class="image" src="https://i.loli.net/2021/01/24/fCkFXK63EZzDIWN.jpg" ></image></li>')
          $("#container").append($dom);
          $("#container").append($dom).masonry("appended", $dom);
          $("#container").imagesLoaded().progress(function(){
              $("#container").masonry("layout");
          });
    }
};

    </script>
  </body>
</html>