html - jQuery Mobile 类似 iPhone 的图片库

Question

我已经做了一些搜索，但找不到我要找的东西。我正在使用 jquery mobile 的 photoswipe 插件来滚动我的图像，但我需要让它们在我的页面上很好地显示才能开始。我想要一个类似 iphone 的照片网格，就像我在 iPhone 上单击照片时发生的情况，然后将这些照片链接到 PhotoSwipe 中。此外，它需要格式化为 PhotoSwipe。

那是纯css吗？如果是这样，有人可以帮我设计造型吗？我对 css 很糟糕，我没有那样的设计头脑。 (我明白，我只是不擅长)。

有什么想法吗？

Answer 1

<div id="container">
    <img src="..." />
</div>

CSS--

#container img {
    float  : left;
    width  : 30%;
    height : auto;
}

这将在每一行放置三个图像，它们将始终几乎填满屏幕(应该留出 10% 的宽度用于间距)。

这是一个演示:http://jsfiddle.net/sy764/

更新

我将容器设为 UL 元素，并将每个图像包裹在 LI 元素中。这是使图像显示为页面宽度的大约三分之一的 CSS:

#container li {
    float   : left;
    width   : 30%;
    height  : auto;
    padding : 3px;
}

#container li img {
    width  : 100%;
    height : auto;
}​

这是一个演示:http://jsfiddle.net/sy764/1/