Javascript CSS响应网格布局，可自动调整屏幕宽度

我试图找出airbnb如何使用网格布局显示照片galery

这不是关于网格布局本身，而是如何确定每行显示1、2甚至3个图像，以及如何确定行数

似乎每个照片库的布局都是独一无二的

首先，我认为对于每一行，会给出一个介于1和3之间的随机值，以确定应该显示多少图像，但布局总是相同的

有没有人有任何线索可以通过不同数量的照片来实现这种布局

编辑：

根据评论，砌体结构是这样的

但例子是（简化的）

编辑2

其他例子

与示例1相同数量的图像布局不同

在示例1中，第一行包含3项 在示例4中，包含1项的第一行

---

这个选择的条件是什么？

1.这就是所谓的砌体布局，airBnb只有两种布局，一种是垂直布局，一种是水平布局

按照此官方MDN文档了解有关

2.现在对于布局，您作为示例1共享的链接具有垂直图像，这些图像是列布局，示例2的第一个图像是行布局

3.他们如何决定使用哪种布局这里有两件重要的事情需要了解第一件是决定要显示的主要布局的视口，第二件是打开的链接数[是..你可以跟踪用户在浏览器中打开了多少链接，因此chorme和firefox中的选项卡很有名]，这将告诉SSR[服务器端呈现页面]引擎旋转布局

4.不要再问这样的问题，否则社区会投票否决你的问题：）

---

奖励一篇供您自学的文章

感谢您的awnser，但它对旋转布局没有任何帮助？感谢您的教程，但正如您所注意到的，airbnb所教授的布局与现在的不同，这是一篇2017年的文章，它不适用于最近的布局样式，但需要从引擎盖下的内容入手。。如果我打扰了stackoverflow社区，那是因为我没有发现任何对我有帮助的东西，但让我感谢你花几分钟的时间来做我唯一的助手。我读了一些关于砖石的文章，但它们对砖石布局没有真正的帮助假定浏览器根据视口和栅格模板属性（容器中的所有子对象）显示图像，但airbnb布局使用行显示照片（对于相同数量的照片，多行或少行）对于相同的iMate大小，有时一行1个图像，有时2个甚至3个仅使用css网格的masonry布局无法获得需要使用JavaScript的混合布局。。还有大量的软件包可以帮助您生成布局。。以David DeSandro为例[他有一个惊人的npm软件包，名为Massey layout[如果你访问这个网站上的布局页面，你会看到普通的html是如何动态转换成各种布局的]