在 CSS/HTML 中创建类似“缩放"的动态画廊视图 [英] Creating a 'Zoom' like dynamic gallery view in CSS/HTML
问题描述
我有一个应用程序，我想在其中创建一个完整大小的 HTML 页面以在信息亭上显示.Javascript 将根据与自助服务终端交互的人数来改变图像的数量(这一边都被处理了).
我可以有一张图片，可以是两张、三张、四张，任何尺寸不超过 7x7 = 49.
我想创建一个与缩放"创建画廊视图的方式非常相似的布局.例如:
- 一张图片:将是页面的 100% 宽度和高度
- 两张图片:将做 50% 的宽度/高度，并排显示，页面顶部和底部带有信箱
- 三张图片:两张在顶部，一张在底部 - 底部一张水平居中
- 四张图片:2x2 网格
- 五张图片:顶行三张，底行两张
- 等
- 九张图片:3x3 网格
你得到了图片！
我今天花了好几个小时试图解决这个问题.因为我已经尝试了很多选项，所以我真的没有可以显示的工作代码了.我尝试过纯 CSS、jquery 操作表、创建砌体画廊的实用程序等.似乎都没有实现我想要的.
有人对如何实现这一目标有任何好主意吗?
它在受控制的环境中在 Chrome 上运行，因此无需担心跨浏览器兼容性，并且通常可以使用大多数技术选项来使其正常工作.
谢谢
如果您希望新人进入底部/左侧，那么网格就是答案.但是为了让底行居中，我们需要转向 flex.
由于您可能会使用 JS 插入或删除人员，因此您可以计算每次需要多少列并重新组织屏幕.
这是显示计算的片段.更改#container 中的div 数量以查看效果.人物 div 的纵横比在 JS 中设置为变量 personAspect.当前设置为 16:9，但可以根据需要进行更改.
<风格>* {边距:0；填充:0；box-sizing: 边框框；}#屏幕 {位置:相对；宽度:100vw；高度:100vh；背景颜色:黑色；溢出:隐藏；}#容器 {位置:相对；顶部:50%；保证金:自动；显示:弹性；flex-wrap: 包裹;对齐内容:居中；}.人 {背景图片:网址(https://i.stack.imgur.com/ju8HY.jpg)；背景尺寸:封面；背景重复:不重复；}</风格><style id="人"></风格><div id="屏幕" ><div id="容器"><div class="person"></div><div class="person"></div><div class="person"></div><div class="person"></div><div class="person"></div><脚本>const personAspect = 16/9;/* 设置为您希望每个人 DIV 的样子 */const maxCols = 7;const screen = document.getElementById("screen");const container = document.getElementById("container");函数重组(){const people = container.querySelectorAll('.person');const numPeople = people.length;const screenAspect = window.innerWidth/window.innerHeight;让列 = 1;for (cols; cols <= maxCols; cols++) {if (numPeople <= (cols * cols)) { break;}}让 w = 0;//将以px为单位的容器让 h = 0;//将以px为单位的容器高度if (numPeople > (cols * (cols-1))) {//>适合 5 和 6 不适合 7h = window.innerHeight;w = h * personAspect;} 别的 {w = window.innerWidth;h = w/personAspect；}container.style.width = w + 'px';document.getElementById('person').innerHTML = '.person {flex: 0 0 ' + (100/cols) + '%;高度:' + (h/cols) + 'px;}';if (numPeople <= (cols * (cols-1))) {h = h- h/cols;}//当最后一行为空时container.style.marginTop = (- h)/2 + 'px';}改组();window.onresize = reorganize;//最终制作不需要，但在开发时更容易使用真实的窗口纵横比
I have an application where I want to create a full sized HTML page for displaying on a Kiosk. Javascript will change the number of images depending on how many people are interacting with the kiosk (this side is all handled).
I could have one image, it could be two, three, four, anything up to 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
- Two images: would do 50% width/height, showing eachother side by side with letterboxing top and bottom of the page
- Three images: two on the top line, one on the bottom - with the bottom one horizontally centred
- Four images: 2x2 grid
- Five images: three on the top line, two on the bottom line
- etc
- Nine images: 3x3 grid
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.
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.
Thanks
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.
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.
Here's a snippet showing the calculation. Change the number of divs in #container to see the effect. The aspect ratio for the person div is set in JS as variable personAspect. Currently set to 16:9 but can be altered as required.
<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>
这篇关于在 CSS/HTML 中创建类似“缩放"的动态画廊视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
