Question

~~我对画廊有点问题。我正在努力调整图片和图片。连续播放的视频，让它们保持相同的高度。~~

~~我可以使用以下代码实现这一点，但仅限于一行图像。如果我尝试放置视频，它就不起作用......~~

    var videos = document.querySelector('.gallery-video');
$(".img-row").each(function () {
    var row = $(this),
        rowItems = row.find(".gallery-item"),
        totalMarginSpace = (4 * (rowItems.length - 1)),
        itemsWidthSum = 0,
        diff,
        rowItem,
        rowItemWidth;
    videos.addEventListener('loadeddata', function() {
        rowItems.height(1000);
        for(var i = 0 ; i < rowItems.length ; i++) {
            rowItem = rowItems[i];
            rowItemWidth = $(rowItem).outerWidth();
            itemsWidthSum += rowItemWidth;
        }
        if(rowItems.length >= 3) {
            diff = (row.width() - totalMarginSpace) / itemsWidthSum;
            rowItems.height(999 * diff);
        } else {
            rowItems.height(250);
        }
    }, false);
});

这是我的HTML：

<section class="gallery-section">

<div class="img-row">
    <video class="gallery-item gallery-video" autoplay loop muted="muted" preload="auto" >
        <source src="" type="video/mp4">
    </video>
    <img class="gallery-item" src="" alt="" />
    <img class="gallery-item" src="" alt="" />
    <img class="gallery-item" src="" alt="" />
</div>

<div class="img-row">
    <img class="gallery-item" src="" alt="" />
    <img class="gallery-item" src="" alt="" />
    <video class="gallery-item gallery-video" autoplay loop muted="muted" preload="auto" >
        <source src="" type="video/mp4">
    </video>
    <img class="gallery-item" src="" alt="" />
</div>

<div class="img-row">
    <img class="gallery-item margot" src="" alt="" />
    <img class="gallery-item" src="" alt="" />
    <img class="gallery-item" src="" alt="" />
    <img class="gallery-item margot" src="" alt="" />
</div>

<div class="img-row">
    <img class="gallery-item margot" src="" alt="" />
</div>

~~关于如何让我的代码工作的任何想法？谢谢！~~

~~代码更新：我用item.offsetWidth替换了item.width（因为视频宽度没有返回）..它好一点但现在包含视频的行小于一个没有。~~

找到解决方案！感谢您的所有帮助，但我真的想用JS来解决我的问题。好的，所以它确实来自视频，因为它们尚未完全加载。所以我添加了一个eventlistener。我更新了我的代码，以防有人想要使用它。

Answer 1

尝试制作表格

<table>
  <tr>
    <th>your imgs</th>
    <th>your videos</th>
    ...
  </tr>
 </table>

然后尝试使用响应式CSS with this tutorial调整表格。我不知道我是否理解你的问题，但我希望这会有所帮助。

Answer 2

这可以使用bootstrap完成。使用col-md-x概念。
完整的教程可在https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp获得。

请浏览此链接https://bootsnipp.com/tags/gallery。
我希望这能帮到您。这里给出了一些优秀的模板。它肯定会给你一个很好的入门代码。

缩放图像＆amp; HTML5视频适合高度相等的行

2 个答案: