Question

我想制作一个图片库，其中图像具有所有（或几乎）不同的尺寸。

因此，我们的想法是创建一个栅格，其图像宽度可能会有所不同，但每行的图像高度都相同。

这里是我想要得到的示意图：

这是我的基本HTML代码：

<div class="container">
<div class="item">
    <img src="http://via.placeholder.com/300x325">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x311">
</div>
<div class="item">
    <img src="http://via.placeholder.com/400x313">
</div>
<div class="item">
    <img src="http://via.placeholder.com/420x301">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x675">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x401">
</div>
<div class="item">
    <img src="http://via.placeholder.com/300x921">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x300">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x303">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x562">
</div>
<div class="item">
    <img src="http://via.placeholder.com/1330x586">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x325">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x311">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x313">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x301">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x675">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x401">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x921">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x300">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x303">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x562">
</div>
<div class="item">
    <img src="http://via.placeholder.com/1330x586">
</div>
<div class="item">
    <img src="http://via.placeholder.com/169x234">
</div>
<div class="item">
    <img src="http://via.placeholder.com/169x234">
</div>

我尝试了插件jquery石工，但结果不是确定的。

我还通过CSS CSS通过Flexsbox尝试了一种解决方案：

.container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .item {
        padding: 10px;
        min-width: 150px;
        max-height: 420px;
        max-width: 75%;
        position: relative;
        text-align: center;
    }
    .item img {
        object-fit: cover;
        height: 100%;
        max-width: 100%;
    }

同一行图像的高度相同，但是在某些我不想拥有的地方出现了很大的空白：这里的示例：https://jsfiddle.net/sadlig/dc6785yx/

也许有更简单的方法可以做到这一点？或存在一个JS库来做到这一点？

Answer 1

您应该能够在子项中添加flex：1，这将使所有项具有相同的高度。

另外两个可能的解决方案是使用Match Height JS插件，您可以编写类似内容。 http://brm.io/jquery-match-height/

$('.item').matchHeight({
  byRow: true,
  property: 'height'
});

如果您正在寻找最新和最伟大的产品，那么您也可以签出CSS Grid，但并非所有浏览器都支持。

Answer 2

您可以使用 Shuffle.js 。确实使事情变得简单。

https://vestride.github.io/Shuffle/

有关所使用的plugin的更多信息。

同一行中每个图像具有相同高度的照片库

2 个答案: