带柔性显示屏的并排画廊

Question

目前我需要将一个视频库放在一起，其中包含一个主视频和最多 4 个子视频。 在这种情况下，我无法更改 dom。

我让它与 flex 一起工作，子视频位于主视频下方，但我需要在主视频的右侧显示子视频。 子视频的数量可能会有所不同（最多 4 个），并且应该缩放以占据主视频的整个高度，间距为 1rem。 我曾尝试使用 CSS 网格，但我需要支持 IE，但事实证明这是有问题的。

这是我目前拥有的示例： https : //jsfiddle.net/gak13ro4/1/

HTML：

<div class="video-container">
  <div class="video"><div class="video-embed"><iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div>
  <div class="video"><div class="video-embed"><iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div>
  <div class="video"><div class="video-embed"><iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div>
  <div class="video"><div class="video-embed"><iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div>
  <div class="video"><div class="video-embed"><iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div>
</div>

CSS：

.video-container {
  background-color: green;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.video-container .video {
  flex-basis: 20%;
  background-color: grey;
}

.video-container .video:first-child {
  flex-basis: 100%;
  padding-bottom: 1rem;
}

.video-embed {
  width: 100%;
  height: 100%;
  position: relative;
}

.video-embed:after {
  content: '';
  display: block;
  padding-bottom: 56.25%;
}

.video-embed > iframe {
    width: 100%;
    height: 100%;
    position: absolute;

}

Answer 1

我知道，也许现在对您来说太晚了，但是要找到解决您问题的好方法需要我花一些时间……几天；-)

我必须找到与第一个视频宽度（带有填充的最大宽度）和屏幕宽度的正确比例。 好吧，我终于找到了（对于 16/9 宽高比的视频）：

r= (n-1)/n + 14p/9w * (n-1)/(n+1)

其中n是视频编号， p是您的填充， w是屏幕宽度。

这是解决方案，只需将其放入数学系统中即可计算视频及其容器的宽度和高度：

const videoRap = 0.5625; // 16/9
const padding = 16; // 1rem
const nVideo = $(".video").length;

var widthVideo,
    widthScreen,
    heightVideo,
    widthContainer,
    newHeight,
    rapp

function calc() {
    widthScreen = $(".video-container").outerWidth();
    rapp = (nVideo - 1) / (nVideo) + ((14 * padding) / (9 * widthScreen)) * ((nVideo - 1) / (nVideo + 1));

    widthContainer = parseInt(widthScreen * rapp, 10);
    widthVideo = parseInt(widthScreen - widthContainer, 10);

    newHeight = parseInt(((widthContainer - (padding * 2)) * videoRap) + (padding * 2), 10);
    heightVideo = parseInt((newHeight / (nVideo - 1)), 10);



    $(".video").css({
        "height": heightVideo,
        "width": widthVideo
    });
    $(".video-container .video:first-child").css({
        "width": widthContainer
    });
    $(".video-container").css({
        "height": newHeight
    });
}

现在您可以放置​​您想要的视频数量，jQuery 会为您完成所有操作：如果您想更改它，您只需更改填充。

const padding = 16; // 1rem

在 CSS 中，您只需在此处更改“填充”：

.video-embed {
    margin:   auto;
    position: relative;
    height:   calc(100% - 2rem); /* your padding * 2 */
    width:    calc(100% - 2rem); /* your padding * 2 */
}

这是所有正在运行的代码（我添加了一个带有 4 个小视频的示例，但您可以放多少个视频）：

 $(function () { const videoRap = 0.5625; // 16/9 const padding = 16; // 1rem const nVideo = $(".video").length; var widthVideo, widthScreen, heightVideo, widthContainer, newHeight, rapp function calc() { widthScreen = $(".video-container").outerWidth(); rapp = (nVideo - 1) / (nVideo) + ((14 * padding) / (9 * widthScreen)) * ((nVideo - 1) / (nVideo + 1)); widthContainer = parseInt(widthScreen * rapp, 10); widthVideo = parseInt(widthScreen - widthContainer, 10); newHeight = parseInt(((widthContainer - (padding * 2)) * videoRap) + (padding * 2), 10); heightVideo = parseInt((newHeight / (nVideo - 1)), 10); $(".video").css({ "height": heightVideo, "width": widthVideo }); $(".video-container .video:first-child").css({ "width": widthContainer }); $(".video-container").css({ "height": newHeight }); } calc(); $(window).resize(function () { calc(); }); });

 * { box-sizing: border-box; } .video-container { display: flex; flex-wrap: wrap; flex-direction: column; width: 100%; } .video{ flex: 1 1 auto; width:auto; display:flex; } .video-container .video:first-child { height:100% !important; } .video-embed { margin: auto; position: relative; height: calc(100% - 2rem); /* your padding * 2 */ width: calc(100% - 2rem); /* your padding * 2 */ } .video iframe { width: 100%; height: 100%; position: absolute; }

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"> <div class="video-container"> <div class="video"><div class="video-embed"><iframe frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div> <div class="video"><div class="video-embed"><iframe frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div> <div class="video"><div class="video-embed"><iframe frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div> <div class="video"><div class="video-embed"><iframe frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div> <div class="video"><div class="video-embed"><iframe frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div> </div>

找到一个只使用 flexbox 和一些 javascript 的解决方案真的很有趣。 非常感谢您的提问！ ;)