航点无限滚动不适用于 3 列布局答案

【问题标题】：Waypoint infinite scroll not working on 3 column layout航点无限滚动不适用于 3 列布局
【发布时间】：2017-08-28 13:33:47
【问题描述】：

我正在使用 jquery waypoint 在我的网站上实现无限滚动，我在页面滚动上加载文章。但是我遇到了一个非常奇怪的问题，无限滚动在移动设备和隐藏我的第三列的屏幕上完美运行。或者有时如果我在页面加载时开始滚动页面，它会起作用。请看布局结构

请帮我用插件解决这个问题。

【问题讨论】：

标签： jquery html infinite-scroll jquery-waypoints

【解决方案1】：

我也遇到过同样奇怪的问题。以前我的html标记是这样的

<div class="container-fluid">
   <div class="infinite-container"> 
     <div class="col-md-6 col-lg-4 infinite-item">
       ...
     </div>
     <div class="col-md-6 col-lg-4 infinite-item">
       ...
     </div>
     ... 
   </div>
</div>

我已经从那里删除了 infinite-item 类并将其放入 div.row：

<div class="container-fluid">
   <div class="infinite-container"> 
     <div class="row infinite-item">
       <div class="col-md-6 col-lg-4">
          ...
       </div>
       <div class="col-md-6 col-lg-4">
          ...
       </div>
       ... 
    </div>
   </div>
</div>

希望对你有帮助

【讨论】：

【解决方案2】：

这是 Django 中无限滚动的示例。

更改无限容器内的行 div 并将无限项类添加到行 div。

    <div class="container-fluid">
        <div class="infinite-container">
            <div class="row infinite-item">
                {% for post in posts %}
                <div class="col-md-4">
                    <div class="card mb-4 shadow-sm">
                        <img src="{{ post.imagen.url }}" class="card-img-top" alt="{{ post.titulo }}">

                        <div class="card-body">
                            <h5 class="card-title">{{ post.titulo }}</h5>
                            <p class="card-text">{{ post.descripcion|truncatechars_html:50 }}</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <a href="{% url 'blog:detalle' post.pk %}"
                                        class="btn btn-sm btn-outline-primary">Ver
                                        Más</a>
                                    <a href="{% url 'blog:editar' post.pk %}"
                                        class="btn btn-sm btn-outline-secondary">Editar</a>
                                    <a href="#" onclick="eliminarPost({{ post.id }})"
                                        class="btn btn-sm btn-outline-danger">Eliminar</a>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end mt-4">
                                <small class="text-muted">{{ post.created|timesince }}</small>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    {% if posts.has_next %}
    <a class="infinite-more-link" href="?page={{ posts.next_page_number }}">Ver Más</a>
    {% endif %}

【讨论】：