如何在div中滑动并在滚动上加载更多？

Question

我尝试编写与您在this网站上看到的相同的动画效果。我想从左到右填充带有平滑动画（向上滑动）的div的引导网格。 Here是我迄今为止取得的成就的演示。它混乱地加载，没有任何顺序和没有动画。我应该怎么做才能像上面提到的网站上那样加载这些div？这是我的代码：

HTML

<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>

的JavaScript

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;
}