Question

我在jquery的图像网格上写作，它将以两种不同的尺寸显示图像。我之前检查了关于图库网格的各种示例，但大多数只处理相同大小的图像。

因此，计划是将图像分成两个部分，并相应地显示一行图像类型一，另一行图像类型2。每行用div分隔并根据图像得到一个类。每个div都是动画的，以使图像流入屏幕。

我很难根据页面宽度拟合图像大小。我的计划是将一类图像宽度缩放到30％页面大小，另一个为18％，根据宽度拟合高度，然后根据图像高度放置包含div顶部位置。

1）我认为计算的宽度是原始图像宽度，而不是显示图像的30％。高度显然与宽度的比例不是4/3。

3）我不禁想到我的实施是僵硬的，有更好的主意吗？我想让图像以动画的形式流入屏幕，这就是为什么我决定使用div的绝对位置

我不是编程新手，但对Jquery和JS来说相对较新。

   function calcPos(){
    var top1 = 200;
    var top2 = 0;
    var ratio = 4/3;
    var width1 = $('.leftSlide img').first().width();
    var width2 = $('.rightSlide img').first().width();
    var height1 = width1/ratio;
    var height2 = width2/ratio;
    top2 += height1 + top1;

    $( '.leftSlide' ).each(function () {
        $('img').each(function (){
            $(this).attr('height', height1);
            });
        $(this).css({ top: top1 });
        top1 = top1 + height1 + height2;
    });

    $('#back').attr('top', top2);

    $( '.rightSlide' ).each(function () {
        $('img').each(function (){
            $(this).attr('height', height2);
            });
        $(this).css({ top: top2 });
        top2 = top2 + height1 + height2;
    });

    }

$(document).ready(calcPos);

相应的html就是

<div class=leftSlide>
<a href=slide.php?img=1&album=2><img src=images/fashion/1.jpg class=panorama></a>
<a href=slide.php?img=2&album=2><img src=images/fashion/2.jpg class=panorama></a>
<a href=slide.php?img=3&album=2><img src=images/fashion/3.jpg class=panorama></a></div>
<div class=rightSlide>
<a href=slide.php?img=4&album=2><img src=images/fashion/4.jpg class=portrait></a>
<a href=slide.php?img=5&album=2><img src=images/fashion/5.jpg class=portrait></a>
<a href=slide.php?img=6&album=2><img src=images/fashion/6.jpg class=portrait></a>
<a href=slide.php?img=7&album=2><img src=images/fashion/7.jpg class=portrait></a>
<a href=slide.php?img=8&album=2><img src=images/fashion/8.jpg class=portrait></a></div>

和css

.portrait{
    width: 18%;
}

.panorama{
    width: 30%;
}
.leftSlide {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    animation: leftSlide 2s;
    z-index: 5;
    overflow: hidden;
}

.rightSlide {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    animation: rightSlide 2s;
    z-index: 5;
    overflow: hidden;
}

图像网格根据屏幕宽度

0 个答案: