图片混排这种特效怎么做的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4230 天前的主题，其中的信息可能已经有所发展或是发生改变。

是JS还是CSS3?
求教前端高手

混排

CSS3

14 条回复 • 1970-01-01 08:00:00 +08:00

qiayue

2013-04-17 12:00:17 +08:00

以图中排版为例，总宽度为600px，划分成150px*150px的小格子。
图片大于150*150小于300*300的，用150*150的格子装，大于300*300的，用300*300的格子装。
格子设置为溢出隐藏。
150的格子，长图片压缩高度至150，多余的宽度减去150之后再除以2，结果为N，用margin-left:-Npx。竖图片宽度压缩至150，多余的高度减去150之后除以2，结果为N，用margin-top:-Npx。
300的格子一样。
还可以有150*300、300*150两种格子。

剩下的就是如何对这几种规格的格子进行排版的问题了。
两种方式，一种是类似于瀑布流的布局，用js计算，然后绝对定位。
另一种是格子外面再套格子，你可以参考一下 500px.com 。

以上没写单位的，默认为px。

Mutoo

2013-04-17 13:54:44 +08:00

http://masonry.desandro.com/

iZr

2013-04-17 14:02:23 +08:00 via iPhone

good

cutehalo

2013-04-17 14:23:23 +08:00

我觉着用table最简单

nealv2ex

2013-04-17 14:46:07 +08:00

最下一行，中间2个，花衬衫，的道具，只在岛国动作片里见过。求问是神马？

iloveyou

2013-04-17 16:04:16 +08:00

如果不要求动态弹性，table最简单

iZr

2013-04-17 16:18:35 +08:00

漂亮.

bitsmix

2013-04-17 17:52:51 +08:00

怎么还有人在为这样的 layout 用 table 啊。。。

没节操

underone

2013-04-17 18:00:57 +08:00

@nealv2ex 闪光环，主要用来拍微距和人像，光线均匀。

Zhang

2013-04-17 18:42:32 +08:00

table最好用来装data!

wsph123

2013-04-17 23:01:24 +08:00

http://itorr.sinaapp.com/javascript/fall.htm

之前写过类似的东西

azure

2013-04-18 10:02:27 +08:00

@nealv2ex 环闪，主要用于近距离拍摄。图中这人在这个场合下用环闪纯属装逼。环闪主要用来消除阴影和均匀布光，增强拍摄带有反射能力的材质的质感，比如光滑的塑料，抛光的金属。用于拍人的时候可以在脸上形成苹果光。另外皮肤本身会有一些油脂所以也可以算作一些反射的材质，环闪再一定程度可以消除油腻感以及让肤质看起来更细腻

kenneth

2013-04-18 10:37:22 +08:00

@wsph123 能否简单说下原理，只看代码还是不很理解。

nealv2ex

2013-04-18 10:51:35 +08:00

@underone
@azure

感谢。长姿势了！