<!DOCTYPE HTML>
<html>
<body>
<div id="show" style="width:700px;"></div>
<script>
let ims = [
'https://icdn.lenta.ru/images/2020/09/11/13/20200911130707980/pic_d755b4d0cfe191965282d20cf7f15929.png',
'https://images.pexels.com/photos/5393597/pexels-photo-5393597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
'https://s1.stc.all.kpcdn.net/russia/wp-content/uploads/2020/05/devushka-v-shlyape.jpg',
'https://cdn.trinixy.ru/pics5/20180420/thousand_words_01.jpg',
'https://cdn.trinixy.ru/pics5/20180420/thousand_words_10.jpg',
'https://cdn.footballua.tv/i/image_650x360/uploads/football-media/image/5e9/97d/394/5e997d3944244_.jpeg',
'https://cdn.trinixy.ru/pics5/20180420/thousand_words_57.jpg',
'https://cdn.trinixy.ru/pics5/20180420/thousand_words_47.jpg',
'https://veasy.ru/wp-content/uploads/1-69.png',
'https://images.pexels.com/photos/5644323/pexels-photo-5644323.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
'https://vjoy.cc/wp-content/uploads/2019/07/1-47.jpg',
'https://cdn.trinixy.ru/pics5/20180420/thousand_words_14.jpg',
'https://cdn.trinixy.ru/pics5/20180420/thousand_words_37.jpg',
'https://cdn.trinixy.ru/pics5/20180420/thousand_words_39.jpg'
],
width_box = 700,
height_line = 150,
margin = 1,
count = ims.length,
first = 1,
box = document.getElementById('show'),
data = {};
function preload(ret) {
ims.forEach((e, i)=> {
load(e, function() {
data[i+1] = {src: this.src, w: this.width, h: this.height};
if(i == count-1) ret()
})
});
function load(im, f) {
let img = new Image;
img.onload = f;
img.src = im
}
}
preload( _=> {
while(first <= count) {
let im = first - 1,
H = height_line + 1;
while(H > height_line && im < count) {
im++;
let width = width_box - (im - first + 1) * margin * 2;
let del = width * data[first].h,
dev = data[first].w;
for(let i = first+1; i <= im; ++i) dev = dev + data[i].w * (data[first].h / data[i].h);
H = Math.floor(del / dev);
if(H <= height_line) {
for(let i = first; i <= im; ++i) {
ims = new Image;
ims.src = data[i].src;
ims.height = H;
ims.style.margin = margin + 'px';
box.appendChild(ims);
}
first = im + 1;
} else {
if(im == count) {
for(let i = first; i <= im; ++i) {
ims = new Image;
ims.src = data[i].src;
ims.height = H;
ims.style.margin = margin + 'px';
box.appendChild(ims);
}
first = im + 1;
}
}
}
}
});
</script>
</body>
</html>