Javascript 如何通过向下滚动显示内容？

我已经为我的网页编写了一些html代码，其中显示了多个图像。问题是，所有图像都是在启动时加载的。我想通过向下滚动来改变它以显示额外的图像。如何使用jQuery实现这一点

代码是：

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

{% block content %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
      <h2>Pictures of Coffee</h2>
      <div class="row">
        <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
      </div>

    </div>
{% endblock %}

{%extends“base.html”%}
{%load staticfiles%}
{%block content%}
咖啡图片
{%endblock%}

我只想添加javascript，这样当页面向下滚动时，图像就会被加载。我尝试了代码笔网站上的代码，但它正在工作。如何解决此问题？

滚动的事件是：

$(window).on('scroll', function() {

 //write your logics to load your images as per requirements

})

---

首先，引导将一行划分为12列，例如：

<div class="container">
        <div class="row">
             <div class="col-xs-4 col-lg-4 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
             <div class="col-xs-4 col-lg-4 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
             <div class="col-xs-4 col-lg-4 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
        </div>
</div>

将另一行与上述列一起使用（在容器中）。要制作滚动效果，需要三个组件：动画 viewportchecker jquery
按照此示例将其添加到html模板的标记头中。在找到href或src的地方，必须使用存储上述三个文件的路径覆盖，或者可以直接使用外部文件，例如

.hidden{不透明度：0；}
.visible{不透明度：1；}

在body标记add this中，用代码替换容器，但请记住脚本会将效果添加到“.post”类中，因此您可能需要更改代码类的名称，或者您也可以在脚本中更改类：

<div class="container">
            <div class="post"> <!-- Post content goes here --> </div>
            <div class="post"> <!-- Post content goes here --> </div>
            <div class="post"> <!-- Post content goes here --> </div>
            <div class="post"> <!-- Post content goes here --> </div>
            <div class="post"> <!-- Post content goes here --> </div>
            <div class="post"> <!-- Post content goes here --> </div>
</div>

这会有帮助：）

运行代码段并进行检查

当您继续滚动页面时，如果窗口滚动位置大于最后一个图像滚动位置，屏幕上剩余的图像将显示出来

函数showImages（）{ var imgStartIndex=0； var-nextSetOfImages=10； var incrementImageLimit=10； var collectionOfImages=$（“.thumbnail img”）； var noOfImages=collectionOfImages.length； 返回函数（）{ 对于（var i=imgStartIndex；i=noOfImages）？noOfImages:nextSetOfImages； }; } var disImg=showImages（）； $（文档）.ready（函数（）{ disImg（）； $（文档）。滚动（函数（）{ var scollposition=$（window.scrollTop（）； var imgShownLast=$（“.thumbnail img.show”）.last（）； var imgShowFist=$（“.thumbnail img.show”）.first（）； var imgLastScrollPos=$（imgShownLast）.offset（）.top； var imgFirstScrollPos=$（imgShowFist）.offset（）.top； scollposition=scollposition+imgFirstScrollPos+200； 如果（scollposition>imglastcrollpos）{ disImg（）； } }); });

。缩略图img{
宽度：100px；
高度：100px；
显示：无；
}

咖啡图片

希望这对您有所帮助。你可以为上面的代码编写脚本。我不明白。请从哪个网站下载css和js文件对不起，这太混乱了。css:viewport:test.js是什么？你没有在任何地方使用它，它只是一个例子，你可以把它放在body-inside标记中，或者你可以制作一个外部文件，在head标记中调用它。如果您喜欢我的答案，请将其标记为有用。我的代码中没有img类，我应该将该类放在哪里？还是必须将其更改为指定的类名？。缩略图被添加到div元素中，该元素封装了IMG标记。您可以将代码添加到小提琴中，这样我们就可以缩小问题的范围。这是整个项目链接。它是使用django框架编写的。所以我附加了所有的代码。请检查这个

<div class="container">
            <div class="post"> <!-- Post content goes here --> </div>
            <div class="post"> <!-- Post content goes here --> </div>
            <div class="post"> <!-- Post content goes here --> </div>
            <div class="post"> <!-- Post content goes here --> </div>
            <div class="post"> <!-- Post content goes here --> </div>
            <div class="post"> <!-- Post content goes here --> </div>
</div>