Question

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

这很重要的原因是因为如果我不根据它们的分辨率计算这个并且拉出静态数量的图像，在某些分辨率上，底行会有一个不均匀的数字。这看起来很难看。

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

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

感谢。

Answer 1

这听起来像是一个代数问题。给定宽度x高度...但我们知道缩略图不会挤压成不规则的尺寸。因此，我们计算出在我们的宽度内适合的数量（给定它们之间的css边距）。对高度做同样的事。我无法为你编码，因为我没有每个缩略图的宽度和高度，但我也看到它非常简单。

Answer 2

你可以通过传递一个更强大的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 布局模式），它可以免费用于非商业/个人用途。

根据分辨率计算拇指数

2 个答案:

修改