Подтвердить что ты не робот

Как контролировать вертикальное расстояние детей?

Task

Храните вертикальный список пальцев ногтей. Гайки должны масштабироваться с размерами окна. Громкие пальцы расположены в 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?
4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете получить его без JS и с более простым HTML и CSS (flexboxes и чрезмерные контейнеры выглядят ненужными).

Так как

Храните вертикальный список пальцев ногтей.... фиксированное число из них появляется в видимой области div

Горизонтальное изменение размера не должно влиять на размер эскизов, чтобы поддерживать соотношение сторон изображения.

Итак, нам нужно только рассчитать и установить высоту изображения в зависимости от желаемого количества видимых миниатюр.

Запустите снимок ниже в полноэкранном режиме и измените размер окна:

.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="http://lorempixel.com/400/200/?1">
    <img src="http://lorempixel.com/400/200/?2">
    <img src="http://lorempixel.com/400/200/?3">
    <img src="http://lorempixel.com/400/200/?4">
    <img src="http://lorempixel.com/400/200/?5">
    <img src="http://lorempixel.com/400/200/?6">
    <img src="http://lorempixel.com/400/200/?7">
    <img src="http://lorempixel.com/400/200/?8">
    <img src="http://lorempixel.com/400/200/?9">
    <img src="http://lorempixel.com/400/200/?0">
    <img src="http://lorempixel.com/400/200/?a">
    <img src="http://lorempixel.com/400/200/?b">
  </div>
</div>

Ответ 2

Замените .thumb-size

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

Для

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

он будет работать как ожидалось

Ответ 3

Вы можете использовать высоту в процентах (%), чтобы дочерние элементы были выровнены относительно высоты родителя. Вам не нужно использовать JavaScript, вы можете использовать чистый CSS, чтобы сделать эту работу.

Ответ 4

С помощью некоторых комментариев здесь, где не было полного решения, но дал мне представление о том, как его создать, я мог бы исправить свою проблему. Я отправляю ответ на свой собственный вопрос здесь, чтобы я мог оставить свой вопрос без изменений и выделить необходимые изменения.

Были две связанные проблемы:

  • Настройка размера гвоздя большого пальца на размер документа
  • Сохранение вертикального расстояния между пальцами ногтей (изначально, когда окно браузера очень узкое, список показал больше, чем желаемое количество ногтей)

Поэтому мне просто пришлось изменить CSS следующим образом:

  • Сделать вертикальное расстояние ногтей большого пальца зависит от vh, а не от vmin (это было facepalm у меня, когда я понял, потому что это на самом деле довольно очевидно):

    .thumb размера {   margin: 1vh 1vh;   дисплей: flex;   justify-content: center;   align-items: center; }

  • Задайте размер гвоздя пальца в классе ногтей большого пальца и просто сделайте его относительным с помощью vh:

    .thumb {   ширина: 15vh;   высота: авто;   border: 2px solid # 404040; }

С этими изменениями я мог полностью избавиться от кода Javascript, который я пытался правильно форматировать в списке ногтей для пальцев. Страница теперь довольно хорошо масштабируется с размером окна.

Для справки см. http://www.brockart.de/S