任务:

保留指甲的垂直列表。拇指指甲必须与 window 尺寸成比例。指指甲包含在div中,其尺寸使用vw,vh给出。每次调整大小时,Javascript函数都会重新计算所有指尖的宽度和高度,以使固定数量的指尖出现在div的可见区域中,并尽可能大。为了使拇指指甲的垂直间距保持恒定,将可见拇指指甲的高度相加,增加一个因子,并分配给div的高度。

问题:

当使窗口非常狭窄时,指指甲之间的垂直空间会越来越大。为hFit和hTotal计算的值(请参见下面的Javascript代码)似乎不正确,并导致不想要的覆盖或拇指指甲的垂直间距太大。

详细信息:

整个布局如下:

最外面的div(.content-area)控制整个控件的垂直对齐(居中)。
.content-area的子级(.content-control)控制实际列表(.content-data)的布局以及一个将显示在该列表左侧的关闭按钮(.close-btn-area)。

代码:

CSS:

.content-area
{
    position: absolute;
    left: 2vw;
    top: 5vh;
    width: 30vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    list-style: none;
    opacity: 0.0;
}

.content-control
{
    position: relative;
    margin: 0 0 0 0;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: flex-start;
    overflow: hidden;
}

.content-data
{
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#thumbs-content
{
    margin: 1vmin 1vmin 1vmin 1vmin;
    height: 78vh;
    font-family: 'Alegreya Sans SC', Verdana, sans-serif;
    font-variant: small-caps;
    overflow: hidden;
    color:#404040;
}

.thumb-size
{
    margin: 1vmin 0;
    width: 16vw;
    height: 12vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close-btn-area
{
    margin: 1vmin 1vmin 1vmin 1vmin;
    width: 4vh;
    height: 4vh;
    display: flex;
    align-items: start;
    justify-content: flex-start;
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.close-btn
{
    width:    4vh;
    height: 4vh;
    border: 0;
}

HTML:

<div class="content-area" id="thumbs-area">
    <div class="content-control" id="thumbs-control">
         <div class="close-btn-area" id="close-thumbs">
             <a><img class="close-btn" id="close-btn-thumbs" src="close-btn-inverted-128x128.png">
         </div>
         <div class="content-data" id="thumbs-data">
            <article id="thumbs-content">
                <div class="thumb-size"><img class="thumb" id="thumb1" src="img1.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb2" src="img2.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb3" src="img3.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb4" src="img4.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb5" src="img5.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb6" src="img6.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb7" src="img7.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb8" src="im8.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb9" src="im9.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb10" src="img10jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb11" src="img11.jpg"></div>
            </article>
        </div>
    </div>
</div>

JavaScript:

const nVisibleThumbs = 6;
var nTopThumb = 0;
var nThumbCount = 11; // simplified; will be computed in the actual code
var nThumbScale = 0.9;

function RecalcThumbsLayout ()
{
    var elem = $('#thumbs-content');
    var w = elem.width ();
    var h = Math.round (elem.height () * nThumbScale);
    var hFit = 0;
    var wFit = 0;
    var hTotal = 0;

    for (i = 1; i <= nThumbCount; i = i + 1)
    {
        var idStr = "#thumb" + i;
        var ar = Math.min (1.5, $(idStr).prop ('naturalWidth') / $(idStr).prop ('naturalHeight'));
        var ph = Math.round (h / nVisibleThumbs * 0.9);
        var pw = Math.round (Math.min (ph * ar, w * 0.9));
        ph = Math.floor (pw / ar); // considers portrait format images
        $(idStr).css ("width", pw);
        $(idStr).css ("height", ph);
        hTotal += ph;
        if ((i > nTopThumb) && (i <= nTopThumb + nVisibleThumbs))
            hFit += ph;
        if (wFit < pw)
            wFit = pw;
    }
    wFit *= 1.25; // compensate for scaling above
    hFit *= 1.25; // compensate for scaling above
    $('#thumbs-data').css ('width', wFit + 'px');
    $('#thumbs-data').css ('height', hFit + 'px');
    elem.css ('height', hTotal + 'px');
}

演示:

要查看有害效果,您可以转到此处:http://www.brockart.de/S,单击“Schmuck”,然后水平调整浏览器窗口的大小。

问题:
  • 我需要在Javascript中进行哪些更改才能使其正常工作?
  • 是否有更优雅的方法仅使用css/html做到这一点?
  • 最佳答案

    您可能会在没有JS的情况下使用更简单的HTML和CSS来获得它(flexbox和过多的容器看起来是不必要的)。

    自从



    水平调整大小不应影响缩略图的大小,以保持图像的宽高比。

    因此,我们所需要做的就是根据所需的可见缩略图数量来计算和设置图像高度。

    全屏运行下面的代码片段并调整窗口大小:

    .content {
      position: absolute;
      left: 2vw;
      top: 5vh;
      height: 90vh;
    }
    
    .thumbs {
      height: 100%;
      padding: 0 1rem;
      overflow-y: auto;
    }
    
    .thumbs img {
      display: block;
      box-sizing: border-box;
      /*
      since we need to fit 6 images,
      set img height = 1/6 of the container height
      */
      height: 16.667%;
      width: auto;
      border: solid 1vh transparent;
    }
    
    .close-btn {
      float: left;
      width: .9em;
      height: .9em;
      border: solid .15em;
      border-radius: 55%;
      color: #fff;
      background: #000;
      box-shadow: 0 0 2px #000;
      text-align: center;
      font: 400 2rem/.9 sans-serif;
    }
    <div class="content">
      <a class="close-btn">&times;</a>
      <div class="thumbs">
        <img src="https://picsum.photos/400/200/?1">
        <img src="https://picsum.photos/400/200/?2">
        <img src="https://picsum.photos/400/200/?3">
        <img src="https://picsum.photos/400/200/?4">
        <img src="https://picsum.photos/400/200/?5">
        <img src="https://picsum.photos/400/200/?6">
        <img src="https://picsum.photos/400/200/?7">
        <img src="https://picsum.photos/400/200/?8">
        <img src="https://picsum.photos/400/200/?9">
        <img src="https://picsum.photos/400/200/?0">
        <img src="https://picsum.photos/400/200/?a">
        <img src="https://picsum.photos/400/200/?b">
      </div>
    </div>

    09-20 06:53