css - 如何在 CSS/Bootstrap 中水平堆叠/对齐图像而不考虑方向？

<分区>

我在显示堆叠图像时遇到问题。我正在使用 Bootstrap，我正在使用 Django 显示模型中的所有图片(这里的 Django 没有问题)。

我知道这取决于 flexbox，我已经搜索并使用了各种东西，例如换行、对齐元素、对齐内容等，同时我可以让横向图像与纵向图像的底部对齐成一行，我想让他们做的是像本网站上的图像堆叠方式一样全部堆叠在一起:https://unsplash.com/

各种方向都很好地水平堆叠在一起。这是我的代码({code} 只是从 Django 模型中提取数据，它循环添加每张图片)

<div class="row my-4 text-center mx-auto w-auto flex-wrap align-items-start">
    {% for picture in object_list %}
    <div class="col mx-auto centered mb-3">
        <a href="#">
            <div class="card mx-auto text-center" style="width: 25em">
                <img src="{{ picture.front_image.url }}" class="card-img-top p-3" alt="Picture">
                <div class="card-body">
                    <h5 class="card-title font-weight-bold">{{ picture.name }}</h5>
                </div>
            </div>
        </a>
    </div>
    {% endfor %}
</div>

我在查看其他问题和指南后提出了这个问题，并尝试了各种方法，主要是更改顶部 div 以包含各种 Bootstrap 类，但我无法获得我想要的效果。

感谢任何帮助或建议

最佳答案

你需要使用 javascript 库来完成它。这种布局称为 Masonry 布局。

有关如何实现它的更多信息，请参阅以下链接

Masonry Layout (需要 Jquery)

此库的替代品 Macy.js (纯javascript)

http://callmecavs.com/bricks.js/

关于css - 如何在 CSS/Bootstrap 中水平堆叠/对齐图像而不考虑方向？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55119521/