我最近一直在研究Pinterest网站的页面代码,以学习CSS中的一些设计技巧.我观察到的一件事是他们使用CSS样式设置每个图像的高度.这对我来说很奇怪,因为很明显它们都被调整大小以便具有192px的统一WIDTH.是否有设置高度而不是宽度的技术原因?
例:
<img src="http://media-cache-ec8.pinterest.com/upload/30962316158222159_nQdVRIXP_b.jpg" alt="Summer camp" class="PinImageImg" style="height: 163px;">
Run Code Online (Sandbox Code Playgroud)
Pinterest使用JQuery砌体.http://masonry.desandro.com/ 现在,如果你像Pinterest那样尝试使用砌体浮动物体; 无论您放大或缩放多少,都会出现无法排列物体的情况.如果你通过设置对象的宽度来玩游戏; 你很快就会意识到"Pinterest的192px"背后的数学.在给出合理的填充和边距之后,您必须为该布置的正确功能指定此特定宽度.我一直在开发一个类似于Pinterest的网站,我们用了一个多星期来解密"Pinterest的192px宽度"背后的逻辑