各位前端老哥来看看这种照片墙怎么实现最好？

[oukichi]

我现在是用 js 算的绝对定位铺上去的，可是每当窗口 resize 的时候，就会多少出现点问题。 各位前端大兄弟可有妙计？ 或者可以推荐给我一个什么库吗？ 谢谢各位！

[acthtml]

自己写一个，思路：先装大石头，再装小沙子。

先随机大的图并确定位置，例如 3x3, 2x2 ，其余部分用 1x1 的图填充。

[dawnven]

要实现一个照片墙，可以使用前端框架 (如 React 、Angular 、Vue 等) 以及相应的库或组件。以下是一些可能有用的库或组件:

React GridLayout:这是一个用于在 React 中实现网格布局的库。它可以帮助你轻松地创建具有不同大小照片的照片墙。

Ng-Grid:这是一个用于 Angular 的网格布局库。它也可以帮助你创建照片墙，并且提供了一些选项来控制照片的大小和排列方式。

VueGridster:这是一个用于 Vue.js 的网格布局组件，它可以帮助你轻松地创建照片墙。它支持不同大小的照片，并且可以根据需要自定义布局。

Photo Gallery:这是一个用于 React 的相册组件，它可以轻松地显示多张照片，并且可以根据需要自定义样式。

Pixastic:这是一个用于 JavaScript 的图像处理库，它可以将照片墙转换为动画效果。

以上这些库或组件都可以用于实现照片墙，具体选择哪一个取决于你的需求和偏好。



--------------------------
我帮你问 chatgpt 了

[7anshuai]

看看这个？ https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html

[Seanfuck]

瀑布流，数量固定的话 table ，图片用背景图填充方式

[throns]

用 grid 布局试试。https://www.freecodecamp.org/news/how-to-create-an-image-gallery-with-css-grid-e0f0fd666a5c/amp/

[oukichi]

@dawnven 哈哈哈，gpt 说话味道很明显

[henryxie2093]

这不是 https://www.artstation.com 吗？
看下人家页面怎么写的

[henryxie2093]

@henryxie2093
这个页面下
https://www.artstation.com/?sort_by=community&dimension=all

[IceBay]

昨天刚好有用这个。

https://github.com/metafizzy/isotope

[jifengg]

用库固然是一个好办法，不过这个貌似不复杂，你不妨贴一下你具体遇到的问题。我刚花点时间写了一个，没碰到 resize 有问题。

[kongkx]

display grid 。加上 nth-child 应该能处理

[shabbyin]

grid 会自动填充到合适的位置 比 flex 更智能

[xgfan]

如果不需要跨行的话。可以看看 http://miromannino.github.io/Justified-Gallery/getting-started/

[phub2020]

一楼的老哥想法就很好，如果不用已有的轮子的话，那先准备盒子，再填充内容就很不错

[urnoob]

我是纯后端
再大的图片都是小图片组成的，标记使用过的区域（二维数组），用算法选择合适大小图片，外加点随机大小图。剩下 resize 就应该是 css 相关了吧

[tomcats]

Transform scale 整体缩放

[Envov]

grid 应该可以实现