仿动态磁贴(再次是傻逼方式

首先贴上示例页面链接:点我我会害羞

身为一个懒比我果然没做跨浏览器优化。反正猎豹/Chrome/FireFox新版测试都能跑……(捂脸

灵感来自猎豹的动态磁贴首页。背景是扒的猎豹浏览器内置默认背景,图片来自App Store应用iDays截取。

一开始我以为动态磁贴是很牛逼的css搞起的,,,直到后来我看见猎豹首页磁贴的style里面写着:

top: ??px; left: ??px;

于是我明白了金山的工程师们用得是我之前学瀑布流的那种方式……( 极客学院,iwen讲的 )

最终选择了半css半js的写法。如页面所示。

在1030px的分界处改变了磁贴的大小。

同时,在浏览器尺寸发生变化的时候,会取到磁贴父标签的宽度来修改left值使其居中。

(相信有闲心F12的已经发现了,我懒得给磁贴起名,所以统一叫李狗蛋了,父标签叫李狗蛋们。(lgd/lgds(QAQ

因为打开方式不对所以js写得挺冗余的。。不过不知道有什么更简单的做法。再撞到类似适应性居中的时候学习一下别人的css写法吧。

标签: css, 响应式

添加新评论