Javascript 如何在div中滑动并在scroll上加载更多内容？

我正试图编写和你们在网站上看到的一样的动画效果。我想用从左到右平滑动画（向上滑动）的div填充引导网格。这是我迄今为止所取得成就的一个演示。它是无序加载的，没有任何顺序和动画。我应该怎么做才能像上面提到的网站一样加载这些div？这是我的密码：

HTML

JavaScript

var showAll=[“div1”、“div2”、“div3”、“div4”、“div5”、“div6”、“div7”、“div8”、“div9”]；
VarWeb=[“div2”、“div3”、“div4”]；
var adv=[“第2类”、“第5类”、“第6类”、“第7类”]；
函数showHide（数组）{
if（document.getElementById）{
var divs=document.getElementsByClassName（“可隐藏”）；
对于（变量i=0；i

我相信您所指的网站是基于。你也可以检查它是否提供多种加载效果。我相信你所指的网站是基于。您还可以检查是否提供多个加载效果。

<div class="row" id="secondRow" style="background-color: black">
        <div class="col-md-4 col-sm-6 hideable animated slideInUp" id="div1"> <img src="images/bg1.jpeg" alt="whatever"> </div>
        <div class="col-md-4 col-sm-6 hideable animated slideInUp" id="div2"> <img src="images/bg2.jpeg" alt="whatever"> </div>
        <div class="col-md-4 col-sm-6 hideable animated slideInUp" id="div3"> <img src="images/bg3.jpeg" alt="whatever"> </div>
        <div class="col-md-4 col-sm-6 hideable animated slideInUp" id="div4"> <img src="images/bg4.jpeg" alt="whatever"> </div>
        <div class="col-md-4 col-sm-6 hideable animated slideInUp" id="div5"> <img src="images/bg5.jpeg" alt="whatever"> </div>
        <div class="col-md-4 col-sm-6 hideable animated slideInUp" id="div6"> <img src="images/bg6.jpeg" alt="whatever"> </div>
        <div class="col-md-4 col-sm-6 hideable animated slideInUp" id="div7"> <img src="images/bg6.jpeg" alt="whatever"> </div>
        <div class="col-md-4 col-sm-6 hideable animated slideInUp" id="div8"> <img src="images/bg6.jpeg" alt="whatever"> </div>
        <div class="col-md-4 col-sm-6 hideable animated slideInUp" id="div9"> <img src="images/bg6.jpeg" alt="whatever"> </div>
    </div>

var showAll = ["div1", "div2", "div3", "div4", "div5", "div6", "div7", "div8", "div9"];
var web = ["div2", "div3", "div4"];
var adv = ["div2", "div5", "div6", "div7"];


function showHide(array) {
    if(document.getElementById) {
        var divs = document.getElementsByClassName("hideable");
        for(var i = 0; i < divs.length; i = i + 1) {
            $(divs[i]).fadeOut("slow");
        }
        for(var j = 0; j < array.length; j = j + 1) {
            var divid = document.getElementById(array[j]);
            if(array.length % 3 == 0) {
                document.getElementById(array[j]).className = "col-md-4 col-sm-6 hideable animated slideInUp";
            } else if(array.length % 4 == 0) {
                document.getElementById(array[j]).className = "col-md-3 col-sm-12 hideable animated slideInUp";
            }
            var divid = document.getElementById(array[j]);
            $(divid).fadeIn("slow");
        }
    }
    return false;
}