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

2013-04-17 11:34:16 +08:00
 kenneth
是JS还是CSS3?
求教前端高手

4012 次点击
所在节点    程序员
14 条回复
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
iZr
2013-04-17 14:02:23 +08:00
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
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

感谢。长姿势了!

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/66091

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX