0

我有一个缩略图库，我只想显示“X”个图像，其中“X”根据他们的分辨率完全适合特定用户的浏览器窗口。

这很重要的原因是因为如果我不根据它们的分辨率来计算它，并提取静态数量的图像，在某些分辨率下，底行会有一个奇数。这看起来很丑陋。

有没有办法根据分辨率计算要显示的正确图像数量（如果需要，我可以通过 window.height 和 window.width 获得分辨率 - 拇指是动态拉动的，所以这不是问题）？

我目前这样做的方式是使用具有各种分辨率和硬编码“图像数量”值的巨大 switch 语句，并且页面加载将分辨率发送到 PHP 脚本，该脚本将其传递到此 switch 语句中，但是这是不切实际的并且似乎在不同的显示器上具有不可预测的行为，即使是具有相同分辨率的显示器。当然有一种方法可以动态计算吗？或者至少是我目前正在使用的看似糟糕的解决方案的更好解决方案。

谢谢。

4

2 回答 2

1

这听起来像是一个代数问题。给定宽度 x 高度......但我们知道缩略图不会挤压成不规则的大小。所以我们计算有多少将适合我们的宽度（给定它们之间的 css 边距）。对身高做同样的事情。我无法为您编写代码，因为我没有每个缩略图的宽度和高度，但我也看到它非常简单。

于 2012-05-23T06:26:31.770 回答
1

您可以通过传递一个过滤器函数来使用更强大的 jQuery.filter()函数版本。:p

$(selector).filter(function () { });

这将遍历 jQuery 对象中的每个元素，并针对它运行过滤器函数。如果函数返回一个truthy值，则保留该元素；falsy丢弃物。

因此，对于您的用例，让我们假设您的所有图库图像都以某种方式缓存在 jQuery 对象中：

// gallery images
var _images = $('img');

然后，您可以通过在其上运行过滤器功能来仅获取适合某些宽度的图像，例如：

var _fits = _images.filter(function () {

    // as the filter function iterates, 
    // [this] is the current element.

    return (this.width === window.width);
});

希望有帮助。

编辑

重读你的问题，我似乎误解了。

如果您有一组图像，并希望使其完全适合某个设定的宽度，则完全有可能拥有多个适合图像子集的可能组合，并且完全有可能没有子集完全适合。

一种（某种）简单的解决方法是仅使用布局插件为您完成繁重的算法工作。想到的一个是Isotope（查看fitRows布局模式），它可以免费用于非商业/个人用途。

于 2012-05-23T06:43:28.297 回答