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?