Question

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

到目前为止，通过将图像放入容器并使用CSS列属性将它们分配到4列中，我已经取得了相当不错的结果。

问题在于，由于某些图像比其他图像大，并非所有垂直空间都相同，这里是我所说的图片。 How its working right now

您会看到在最后一列中仍然可以使用空间，因此垂直空间的分布可以更均匀。我怎么能用javascript或JQuery做到这一点？

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

CSS

<style>
#container{
    background:rgba(255,0,4,1.00);
    width:85%;
    margin:auto;

     -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;    
}
</style

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

<section id="container">

</section>

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

0 个答案: