Question

我在显示堆叠图像时遇到麻烦。我正在使用Bootstrap，并且正在使用Django模型显示所有图片（此处没有Django问题）。

我知道这取决于flexbox，我已经搜索并使用了诸如wrap，align-items，justify content等各种内容，同时我还可以将风景图像与肖像的底部对齐在一行中，我想让他们做的就是将所有图像堆叠在一起，就像图像在此网站上的堆叠方式一样：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类，但是我无法获得想要的效果。

任何帮助或建议表示赞赏

Answer 1

您需要使用JavaScript库来执行此操作。这种布局称为砌体布局。

请参阅以下链接，以获取有关实现方式的更多信息

Masonry Layout（需要Jquery）

该库的替代版本Macy.js（纯javascript）

更多图书馆

https://isotope.metafizzy.co/layout-modes/masonry.html

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

无论方向如何，如何在CSS / Bootstrap中水平堆叠/对齐图像？

1 个答案: