html - "Float"图像向上与 CSS

标签 html css image pinterest

我正在尝试为我的作品集制作一个类似 Pinterest 的图库。没什么特别的,只是显示一些简单的 PHP 在文件夹中找到的图像。稍后我会附上一个灯箱(或类似的东西)。

目前,我很难让图像“漂浮”在其他图片上。以某种神奇的方式,右上角的两个图像做到了,但其他的没有。 enter image description here

直播可以看到here . 这是一个 JSFiddle , 但它不显示图像。

有什么简单的方法吗?或者我真的需要为此开始使用某种 jQuery 插件吗? 谢谢!

最佳答案

http://masonry.desandro.com/

Masonry 是一个很好的网格排列 JQuery 插件。可能是最好的。

我个人没有用过它,但是我的 friend 们说效果不错:

  • 可定制
  • 它的功能非常轻便
  • 速度很快

不幸的是,它并不是已知宇宙中最快的东西,因为它使用了 JQuery(它已经是一个相对较慢的库,或者开始出现的框架)并且将 CPU 密集型计算放在首位。因此,它不如 CSS hack 快,但 Masonry 是否是最佳选择取决于您究竟需要它做什么,而这个问题已将其排除在外。

如果您正在构建一个简单的投资组合类型的东西,那么 CSS hack 是最好的方法,但如果您要进一步构建一些东西,那么这可能就是您要找的方法。

不幸的是,由于跨浏览器(如 IE)的标准不完整,您会发现在没有大量资源放置客户端的情况下生成此布局(例如调整可能在服务器端裁剪的非常大的图像的图像大小)很困难。

o.v.和 ThinkingStiff 确实有答案,如果您要标准地将进入您网站的每个图像调整为特定大小并使用可用于布局的缓存方法,您可以轻松地通过 CSS hack 来获得简单的东西,例如照片页面或投资组合.

关于html - "Float"图像向上与 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11173827/

相关文章:

image - 如何阅读带有 alpha channel 的动画 gif

php - 将图像存储在数据库中与存储在文件系统中

html - iOS 书签图标

javascript - 无法使用 JS 设置可见性

iphone - 使站点在 iPhone 上对称对齐

html - 是否有仅 CSS 的解决方案可以使垂直网格中的 div 等高?

c - XPutImage 出现问题

html - 当我将鼠标悬停在 html 表中时更改单元格的颜色

html - 如何在 bootstrap 3 中制作双层菜单?

html - 居中任何大小的内容并仍然允许滚动