使用CSS向上"浮动"图像

Question

我正在尝试为我的投资组合制作类似Pinterest的画廊.没有什么太花哨,只是通过一些简单的PHP显示在文件夹中找到的图像.我稍后会附上一个灯箱(或类似的东西).

就目前而言,我难以让图像"漂浮"在其他图片上方.以某种神奇的方式,右上角的两个图像可以做到,但其他图像则没有.

你可以在这里看到它.这是一个JSFiddle,但它没有显示图像.

有一些简单的方法吗？或者我真的需要开始使用某种jQuery插件吗？谢谢!

Answer 1

http://masonry.desandro.com/

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

我个人没有用它,但是我的朋友有很好的结果说:

• 它是可定制的
• 它的功能非常轻巧
• 它很快

不幸的是,它并不是已知宇宙中最快的东西,因为它使用的是JQuery(它已经是一个相对较慢的库,或者它开始得到的框架)并且将CPU密集型计算放在首位.因此它没有CSS黑客那么快,但是否是最好的选择是否是最好的选择取决于你在这个问题中遗漏了什么.

如果你正在构建一个简单的组合类型的东西,那么CSS hack是最好的方法,但如果你的构建更进一步,那么这可能是你想要的.

不幸的是,由于像IE这样的浏览器存在不完整的标准,你会发现产生这种布局而没有相当多的资源放置在客户端(例如图像大小调整为非常大的图像,可能已被裁剪服务器端)很困难.

ov和ThinkingStiff确实有答案,如果你要标准调整每个进入你网站的图像到特定大小并使用可用于布局的缓存方法,你可以轻松地使用CSS hack来完成像照片页面这样简单的事情.投资组合.

Answer 2

您可以使用CSS3执行此操作column-count,假设您至少有一个包含元素.该方法具有通过简单地添加类来容易地(例如,对于移动设备)改变布局的优点.

输出:

演示:http://jsfiddle.net/ThinkingStiff/rS95S/

CSS:

#container {
    column-count: 3;
    column-fill: balance;
    column-gap: 10px;
    width: 330px;
}

.image { 
    display: block;
    margin-bottom: 10px;
    width: 100px;
} 

HTML:

<div id="container">
<img class="image" src="http://farm1.staticflickr.com/205/494701000_744cc3a83a_z.jpg" />
<img class="image" src="http://farm5.staticflickr.com/4028/4287569889_f6a4fca31b_z.jpg" />
<img class="image" src="http://farm3.staticflickr.com/2340/2421926504_d8509d0a98_z.jpg" />
<img class="image" src="http://farm1.staticflickr.com/197/503792921_fedf8ba47e_z.jpg" />
<img class="image" src="http://farm2.staticflickr.com/1153/741035029_f394e11a1f_z.jpg" />
<img class="image" src="http://farm7.staticflickr.com/6213/6243090894_8b8dd862cd_z.jpg" />
<img class="image" src="http://farm2.staticflickr.com/1339/1157653249_dbcc93c158_z.jpg?zz=1" />
<img class="image" src="http://farm3.staticflickr.com/2570/4220856234_029e5b8348_z.jpg?zz=1" />
</div>