3

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

目前，我无法让图像相对于其他图片向上“浮动”。以某种神奇的方式，右上角的两个图像可以做到这一点，而其他的则没有。 在此处输入图像描述

你可以在这里看到它。这是一个JSFiddle，但它不显示图像。

有什么简单的方法吗？还是我真的需要为此开始使用某种 jQuery 插件？谢谢！

4

3 回答 3

6

column-count假设您至少有一个包含元素，您可以使用 CSS3 执行此操作。此方法的优点是只需添加一个类即可轻松更改布局（例如，对于移动设备）。

输出：

在此处输入图像描述

演示：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>
于 2012-06-24T08:54:46.487 回答
6

http://masonry.desandro.com/

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

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

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

不幸的是，它并不是已知宇宙中最快的东西，因为它使用 JQuery（它已经是一个相对较慢的库，或作为它开始使用的框架）并将 CPU 密集型计算放在首位。因此，它不如 CSS hack 快，但 Masonry 是否是最佳选择取决于您需要它的确切用途，而这个问题中没有提到。

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

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

ov 和 ThinkingStiff 确实有答案，如果您要将进入您网站的每张图片标准调整为特定大小并使用可用于布局的缓存方法，您可以轻松地通过 CSS hack 来处理简单的事情，例如照片页面或文件夹。

于 2012-06-23T23:32:00.210 回答
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

摆弄

于 2012-06-24T00:16:11.520 回答