【问题标题】：jQuery Mobile iPhone-like Image GalleryjQuery Mobile 类似 iPhone 的图片库
【发布时间】：2012-03-13 19:11:10
【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

这个例子做你想做的吗：photoswipe.com/latest/examples/04-jquery-mobile.html ?
@Melissa ya 这就是我想要的，但我需要 CSS 才能做到这一点......

标签： html css jquery-mobile

【解决方案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/

【讨论】：

@JoshDG 是的，如果图像在列表项中，它仍然可以工作。但是，您可以只设置我在列表项上提供的 CSS，然后将每个图像的宽度设置为 100%。有关示例，请参阅我的更新。
哦，太完美了！尽管左边有很多空白，我该如何摆脱它？
@JoshDG 只需为li 元素添加一些填充，它们就会被隔开。

【解决方案2】：

查看http://www.photoswipe.com/latest/examples/04-jquery-mobile.html 的示例，将其设置在您的列表元素中：

.gallery li {
float: left;
width: 33.33333333%;
}

这将设置li 及其所有内容的宽度。

【讨论】：

你太棒了！除了图片看起来有点偏向右边......右边有一些空白......理想情况下，图片之间会有一些空间......这样它们每个都像自己的正方形......对不起我不是想让你为我做我的工作，我只是想让 CSS 看起来更漂亮

【解决方案3】：

这个答案我有点晚了，但这是 PhotoSwipe 在 jQueryMobile 示例中使用的确切 css 值：

.gallery { list-style: none; padding: 0; margin: 0; }
.gallery:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.gallery li { float: left; width: 33.33333333%; }
.gallery li a { display: block; margin: 5px; border: 1px solid #3c3c3c; }
.gallery li img { display: block; width: 100%; height: auto; }
#Gallery1 .ui-content, #Gallery2 .ui-content { overflow: hidden; }

【讨论】：