使用CSS向上“浮动”图像

Question

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

现在，我让图像“向上浮动”对抗其他图片时遇到了麻烦。以某种神奇的方式，右上角的两个图像可以做到，但其他图像则没有。

你可以看到它here。 这是一个JSFiddle，但它没有显示图像。

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

Answer 1

http://masonry.desandro.com/

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

我个人没有使用它，但是我的朋友有很好的结果说：

• 可自定义
• 它的功能非常轻巧
• 很快

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

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

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

o.v。和ThinkingStiff确实有答案，如果你要标准调整进入你的网站的每个图像到特定的大小，并使用可用于布局的缓存方法，你可以很容易地通过CSS黑客获取简单的照片页面或投资组合

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>

Answer 3

来自Sammaye回答的

jQuery Masonry 将工作 - 诀窍是在内容以原始顺序附加到DOM之前使其工作（这在ajax网站上相当简单）

然而，有一个原因可以解释为什么Masonry插件矫枉过正 - 这是可变内容宽度。无论是pinterest还是组合模型都不需要这样做 - 同时你最终会遇到客户端的处理开销，以及错误定位内容的闪存。

在这种情况下，仅使用容器<div>列就足够了：

.column {width:33.3%;float:left;/*should be clearfix instead*/}
.column .content {width:95%;margin:2.5%;float:left;}​

然后可以将内容应用于服务器端的正确列（获取图像高度和宽度是微不足道的，只是平衡它的动态）或者在附加内容之前在客户端w / ajax

Fiddled