时间戳

首页 > 解决方案 > 无论方向如何，如何在 CSS/Bootstrap 中水平堆叠/对齐图像？

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

问题描述

我无法显示堆叠的图像。我正在使用 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 类，但我无法获得我想要的效果。

任何帮助或建议表示赞赏

标签： cssflexboxbootstrap-4

解决方案

你需要使用 javascript 库来做到这一点。这种布局称为砌体布局。

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

砌体布局（需要 Jquery）

替代这个库Macy.js（纯 javascript）

更多库

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

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

推荐阅读