无法计算出带有航点的无限滚动

Question

[尝试使用Waypoint应用无限滚动，但似乎无法使其正常工作。

下载并保存在base.html文件夹后，我在static中加载了以下脚本：

    <script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
    <script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
    <script src="{% static 'js/infinite.min.js' %}"></script>

然后我的模板中的以下代码已从base中删除：

{% extends "base.html" %}
{% load static %}

{% block css %}
  <link rel="stylesheet" href="{% static 'home/main.css' %}">
{% endblock css %}

{% block content %}

  <br>

  <div class="container status-update">
    <div class="container">
      <form>
        <div class="input-group-lg">
          <input type="text" class="form-control" value="What's new?">
        </div>
        <br style="height:20px">
        <button type="submit" class="btn btn-primary btn-lg" name="button">Post</button>
      </form>
    </div>
  </div>

  <br>

  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #6298bf">
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="navbar-nav">
          <a class="nav-link active" href="{% url 'home' %}">Activity Feed</a>
          <a class="nav-link" href="{% url 'vehicle_updates' %}">Vehicle Updates<span class="sr-only">(current)</span></a>
          <a class="nav-link" href="/space.html">Garage Updates</a>
        </div>
      </div>
    </nav>
  </div>

  <br>

  <div class="container">
    <div class="primary-segments">
      <h2>Activity Updates</h2>

      <div class="infinite-container">
        {% for post in posts %}
          <div class="infinite-item">
            <div class="card m-3">
              <div class="card-body" style="background-color:#bdcade; padding-bottom:0px">
                <div class="media mb-3">
                  <img src="{{ user.profile.image.url }}" class="d-block ui-w-40 rounded-circle" style="width:40px;height:auto;" alt="">
                  <div class="media-body ml-3">
                    <h5 style="color:#ffffff">{{ post.user.first_name }} {{ post.user.last_name }}</h5>
                    <div class="small text-muted">Yesterday</div>
                  </div>
                </div>
              </div>

              {% if post.image %}
                <img src="{{ post.image.url }}" class="card-img-top" alt="">
              {% endif %}

              <div class="card-body">
                <h5 class="card-title">{{ post.title }}</h5>
                <p class="card-text">{{ post.content }}</p>
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-secondary">Like</button>
                  <button type="button" class="btn btn-secondary">Comment</button>
                </div>
              </div>
            </div>
          </div>

        {% endfor %}
      </div>

      {% if page_obj.has_next %}
        <a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}">More</a>
      {% endif %}

    </div>
  </div>

  <script type="javascript">
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0]
    });
  </script>

{% endblock content %}

[当我运行服务器并加载页面时，它仅在页面底部显示一个”更多”按钮，我可以单击该按钮将我带到下一组对象（在视图中将分页设置为3）。

当我运行服务器时，它似乎没有在控制台中引发任何错误，因此我不确定下一步该在哪里寻找问题。任何帮助将不胜感激。

Answer 1

想通了。

[将JS脚本标记从body的底部移到head，然后开始工作。尚未意识到此位置依赖性。