构建动态响应的图像拼贴

Question

我需要建立一个小图像拼贴画。像这样：

我与flexbox和overflow:hidden;非常接近，但它有太多的缺点。就像有些帖子被截断一样。

我也接近了masonry.js，但这也不理想。有一些奇怪的差距，图像顺序被扰乱。

1. 我在Wordpress模板中这样做，所以HTMl，PHP，CSS，JS都很好。 GUI也很好，无论如何。

2. 理想情况下，第一张图片是最新的帖子，第二张是最新的，最后是六张。

3. 我放在图像上的尺寸标签有点灵活，只要它适用于不同尺寸的屏幕。

4. 如果需要插件来调整图像大小，请创建不同的尺寸等。我会尝试。

5. 图片是来自帖子内容类型的自定义WP字段（main_image）。

Answer 1

阅读this link

中的一些砌体