6

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

 1 year ago
source link: https://www.v2ex.com/t/930436
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

V2EX  ›  问与答

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

  oukichi · 10 小时 43 分钟前 · 2080 次点击
image.png

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

17 条回复    2023-04-07 17:51:39 +08:00

acthtml      10 小时 38 分钟前   1

自己写一个,思路:先装大石头,再装小沙子。先随机大的图并确定位置,例如 3x3, 2x2 ,其余部分用 1x1 的图填充。

dawnven      10 小时 27 分钟前   1

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

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

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

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

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

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

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

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


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK