在 CSS/HTML 中创建类似“缩放”的动态画廊视图
[英]Creating a 'Zoom' like dynamic gallery view in CSS/HTML
问题描述
I have an application where I want to create a full sized HTML page for displaying on a Kiosk.
我有一个应用程序，我想在其中创建一个全尺寸的 HTML 页面，以便在 Kiosk 上显示。 Javascript will change the number of images depending on how many people are interacting with the kiosk (this side is all handled). Javascript 将根据与信息亭交互的人数来改变图像的数量（这一面已全部处理）。
I could have one image, it could be two, three, four, anything up to 7x7 = 49.我可以有一张图片，可以是两张、三张、四张，最多 7x7 = 49。
I want to create a layout that looks very similar in how 'Zoom' creates the gallery view.我想创建一个与“缩放”创建画廊视图的方式非常相似的布局。 For instance:例如：
- One image: would be 100% width and height of the page一张图片：将是页面的 100% 宽度和高度
- Two images: would do 50% width/height, showing eachother side by side with letterboxing top and bottom of the page两张图片：宽度/高度为 50%，并排显示，页面顶部和底部带有信箱
- Three images: two on the top line, one on the bottom - with the bottom one horizontally centred三张图片：两张在顶线上，一张在底部 - 底部一张水平居中
- Four images: 2x2 grid四个图像：2x2 网格
- Five images: three on the top line, two on the bottom line五个图像：顶行三个，底行两个
- etc ETC
- Nine images: 3x3 grid九幅图像：3x3 网格
You get the picture!你懂的图片！
I've spent a good few hours today trying to solve this.我今天花了好几个小时试图解决这个问题。 I don't really have working code to show any more as I have tried lots of options.因为我尝试了很多选项，所以我真的没有工作代码可以显示了。 I have tried pure CSS, jquery manipulating tables, utilities that create masonry galleries, etc. None seem to achieve what I want.我尝试过纯 CSS、jquery 操作表、创建砖石画廊的实用程序等。似乎没有一个能达到我想要的。
Does anyone have any bright ideas on how to make this happen?有没有人对如何实现这一点有任何好主意？
It's running on Chrome in a controlled environment so don't need to worry about cross browser compatibility and can generally get away with using most options for technologies to get this to work.它在受控环境中的 Chrome 上运行，因此无需担心跨浏览器兼容性，并且通常可以使用大多数技术选项来使其正常工作。
Thanks谢谢
1 个解决方案
解决方案1
0 已采纳 2021-01-10 14:37:40
If you wanted the new people to come in at the bottom/left then grid would be the answer.如果您希望新人进入底部/左侧，那么网格就是答案。 But to get the bottom row centered we need to turn to flex.但是要使底行居中，我们需要转向 flex。
As you will probably be using JS to insert or remove people you can calculate how many columns you need each time and reorganize the screen.由于您可能会使用 JS 插入或删除人员，因此您可以计算每次需要多少列并重新组织屏幕。
Here's a snippet showing the calculation.这是一个显示计算的片段。 Change the number of divs in #container to see the effect.更改#container 中的div 数量以查看效果。 The aspect ratio for the person div is set in JS as variable personAspect. person div 的纵横比在 JS 中设置为变量 personAspect。 Currently set to 16:9 but can be altered as required.当前设置为 16:9，但可以根据需要进行更改。
<head> <style> * { margin: 0; padding: 0; box-sizing: border-box; } #screen { position: relative; width: 100vw; height: 100vh; background-color: black; overflow: hidden; } #container { position: relative; top: 50%; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; }.person { background-image: url(https://i.stack.imgur.com/ju8HY.jpg); background-size: cover; background-repeat: no-repeat; } </style> <style id="person"> </style> </head> <div id="screen" > <div id="container"> <div class="person"></div> <div class="person"></div> <div class="person"></div> <div class="person"></div> <div class="person"></div> </div> </div> <script> const personAspect = 16/9; /* SET TO WHAT YOU WANT IT TO BE FOR EACH PERSON DIV */ const maxCols = 7; const screen = document.getElementById("screen"); const container = document.getElementById("container"); function reorganize() { const people = container.querySelectorAll('.person'); const numPeople = people.length; const screenAspect = window.innerWidth/window.innerHeight; let cols = 1; for (cols; cols <= maxCols; cols++) { if (numPeople <= (cols * cols)) { break; } } let w = 0; //will be of the container in px let h = 0; //will be height of the container in px if (numPeople > (cols * (cols-1))) {// > OK for 5 and 6 not OK for 7 h = window.innerHeight; w = h * personAspect; } else { w = window.innerWidth; h = w / personAspect; } container.style.width = w + 'px'; document.getElementById('person').innerHTML = '.person {flex: 0 0 ' + (100/cols) + '%; height: ' + (h/cols) + 'px;}'; if (numPeople <= (cols * (cols-1))) {h = h- h/cols;}// for when last row is empty container.style.marginTop = (- h)/2 + 'px'; } reorganize(); window.onresize = reorganize;//not needed for final production but to make it easier to use the real window aspect ratio when developing </script> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.