Комментарии к этому вопросу подтвердили то, что я подозревал, что это не может быть достигнуто одним только CSS .
@ BugsArePeopleToo дал хороший справочник по библиотеке JavaScript, которая делает то, что я хочу, и многое другое: https://masonry.desandro.com/v3/ и https://isotope.metafizzy.co/layout-modes/masonry.html
Мне нравится быть простым и предпочитать кататься самостоятельно, но я не хотел сам писать JS, если бы какая-то функция CSS, о которой я не знал, сделала бы это. Это не так, поэтому я все-таки прокатился.
Если кто-то захочет сделать то же самое, вот мой первый набросок. Это работает хорошо, но я еще не решил, как лучше обращаться, когда последний ряд не заполнен.
<!DOCTYPE html> <html> <head>
<title>Tile Test</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* { box-sizing: border-box; }
div { border-width: 0; padding: 0; margin: 0; width: 100%; }
img { border-width: 0; padding: 0; margin: auto; height: 99%; }
</style>
</head>
<body>
<h1>Tile Test</h1>
<div id="tileMe">
<img alt="" src=".Images/B0240.jpg" />
<img alt="" src=".Images/B0250.jpg" />
<img alt="" src=".Images/B0260.jpg" />
<img alt="" src=".Images/B0270.jpg" />
<img alt="" src=".Images/B0280.jpg" />
<img alt="" src=".Images/B0290.jpg" />
<img alt="" src=".Images/B0300.jpg" />
<img alt="" src=".Images/B0310.jpg" />
<img alt="" src=".Images/B0320.jpg" />
<img alt="" src=".Images/B0330.jpg" />
<img alt="" src=".Images/B0340.jpg" />
</div>
</body>
<script> "use strict"
window.onload = window.onresize = function() {
resize("tileMe", 14)
}
var pixelsPerEm = function(element) {
var width
var div = document.createElement('div')
div.style.width = "1000em"
element.appendChild(div)
width = div.offsetWidth
element.removeChild(div)
return width / 1000
}
var findAspectRatio = function(images, count) {
var i
var aspect = 0
for (i=0; i<count; ++i)
aspect += images[i].naturalWidth / images[i].naturalHeight
return aspect
}
var makeDiv = function(container, aspect, images, count) {
var i
var div = document.createElement("div")
div.style.height = (container.clientWidth / aspect) + "px"
div.style.display = "flex"
for (i=0; i<count; ++i)
div.appendChild(images.shift())
container.appendChild(div)
}
var resize = function(id, maxEms) {
var aspect, count, i
var container = document.getElementById(id)
var maxHeight = pixelsPerEm(container) * maxEms
var images = Array.from(container.getElementsByTagName("img"))
while (container.lastChild) container.removeChild(container.lastChild)
while (images.length) {
for (i=1; i<=images.length; ++i) {
count = i
aspect = findAspectRatio(images, i)
if (container.clientWidth / aspect < maxHeight)
break
aspect = container.clientWidth / maxHeight
}
makeDiv(container, aspect, images, count)
}
}
</script>