设计HTML / CSS以实现给定效果

Question

我在项目中使用fancyBox3，我希望实现以下目标：

我想知道是否有一个CSS技巧来实现它，或者它是否需要一些数学和计算才能使它完美契合？

Answer 1

查看masonry.js - 它会为您调整所有计算，以便在调整屏幕大小等时使图像显示出来。

Answer 2

基本上，有两种方法 - 使用JS（有大量脚本，例如https://github.com/brunjo/rowGrid.js，https://haltu.github.io/muuri/，https://github.com/kombai/freewall，http://miromannino.github.io/Justified-Gallery/）或CSS。

CSS的问题在于仍然无法创建真正的“砌体样式布局”，但是您可以存档类似的东西，尝试使用Google搜索“使用CSS进行砌体”，您会发现许多关于此主题的文章和示例，例如，这一个 - https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb