Javascript 如何尽可能均匀地分配css列之间的垂直空间

我正在制作这种网格图像馈送，我试图让它尽可能简单，我知道砌体插件，但如果可能的话，我宁愿不使用它

到目前为止，通过将图像放入容器并使用CSS列属性将其分发到4列中，我已经获得了一个非常好的结果

问题是，由于一些图像比其他图像大，并非所有的垂直空间都相等，这里是我所说的图片

您可以看到，在最后一列中，仍然可以使用空间，因此垂直空间的分布可以更加均匀。 如何使用javascript或JQuery实现这一点

这是我到目前为止得到的代码：

CSS

Javascript/jquery

<script>
    //random generator
    var arr = []
    while(arr.length < 24){
        var randomnumber=Math.ceil(Math.random()*24)
        var found=false;
        for(var i=0;i<arr.length;i++){
            if(arr[i]==randomnumber){found=true;break}
        }
        if(!found)arr[arr.length]=randomnumber;
    }

    list = -12
    order = 0

    $('#button').click(function() {
        // array input
        if (order >= 22) return false;
        lista = list + 12
        order = order + 12
        a = arr.slice(list, order);
        //post image
        $.each(a, function(i,v){
            photo = $('<img src="img/photo/'+v+'.jpg" width="100%"  style="display: none;">')
            $(photo).appendTo('#container').fadeIn(2000);
            $('#container').animate({height: "auto"})
         })
    })
</script>

HTML

---

随着洗牌算法的发展，速度也会越来越慢。你应该向fisher yates查询洗牌算法。谢谢@AndrewShepherd，我会考虑的

<script>
    //random generator
    var arr = []
    while(arr.length < 24){
        var randomnumber=Math.ceil(Math.random()*24)
        var found=false;
        for(var i=0;i<arr.length;i++){
            if(arr[i]==randomnumber){found=true;break}
        }
        if(!found)arr[arr.length]=randomnumber;
    }

    list = -12
    order = 0

    $('#button').click(function() {
        // array input
        if (order >= 22) return false;
        lista = list + 12
        order = order + 12
        a = arr.slice(list, order);
        //post image
        $.each(a, function(i,v){
            photo = $('<img src="img/photo/'+v+'.jpg" width="100%"  style="display: none;">')
            $(photo).appendTo('#container').fadeIn(2000);
            $('#container').animate({height: "auto"})
         })
    })
</script>

<section id="container">

</section>