数组中的图像在css之后没有正确平衡

Question

我正在使用一些php加载文件夹中的所有图像和jquery将它们附加到div“slidediv”。我使用了一些css来调整图像大小和样式，它看起来很好，但由于某种原因，最后一张图像不会出现在顶部，所以我在顶部留下了一个尴尬的空白：

和底部：

我希望底部图像显示在顶部并平衡它。我可以通过将last-child设置为绝对并且使用margin属性来实现这一点，但是在尝试调整大小时它会变得混乱。

    <?php 
$imgdir =   'dirimages/';
$images =   glob($imgdir    .   '*.{jpg,jpeg,png,gif}',GLOB_BRACE);

?>
<script>
jQuery(function(){  
    var phpvar  =   <?php echo json_encode($images) ?>;
    $.each(phpvar,function(id,image){
        jQuery('#slidediv').append('<img class="loadimg" src="' + image + '"/>');
    });
});


</script>

图片的CSS：

    .loadimg {
    height:100px;
    width:100px;
    position:relative;
    top:6.5em;
    margin-left:5%;
    z-index:360;
    opacity:1;
    filter:url(grayfilter.svg#grayscale);
    filter:gray;
    -webkit-filter:grayscale(1);
    transition:ease-in-out 0.2s;
}

持有图像的div的CSS：

#slidediv {
    height:94%;
    width:20%;
    left:-40%;
    background:rgba(0,0,0,1);
    background-clip:padding-box;
    position:fixed;
    float:left;
    opacity:0.8 ;
    z-index:350;
    overflow-y:scroll;
}