Javascript Rdio.com接口-重新组织一行中的相册数量

用户界面给我留下了深刻的印象。（先登录）

我想知道他们是如何根据屏幕大小重新组织中央分区中按行填充的专辑封面数量的。（尝试将其放大和缩小）

我意识到他们使用的是响应式样式表，但是什么决定了每行专辑的数量？这是某种javascript吗？或者它实际上是由响应CSS样式表完成的

---

有没有任何jQuery脚本/插件可以做类似的事情？

它是用JavaScript完成的，但我不知道有任何具体的jQuery插件可以实现这种确切的行为，除了（请注意，它是否可以做到这一点）

不过，我可以解释并向您展示这种平铺视图的基本原理。您的物品需要一个首选尺寸。在调整大小时，计算容器中可以容纳的项目数量，然后计算该值，这将为您提供适合首选大小的项目的确切数量，或者提供下一个更高数量的适合容器的项目

itemsPerRow = ceil(containerWidth / preferedSize)

现在您已经有了适合或必须适合的项目数量，请计算可能的缩放大小，然后将其应用于项目

scaledSize = containerWidth / itemsPerRow

您还需要决定如何定位项目。。。你可以让它们浮动：

但这可能有点离谱，定位它们看起来绝对更好：

正如我所说，这只是基础，但它应该让你开始

JSFIDLE示例的代码： 浮动 HTML

CSS

绝对定位 JS

CSS

---

它是用JavaScript完成的，但我不知道有任何特定的jQuery插件可以实现这种精确的行为，除了可能的（请注意，如果它可以做到这一点，请相当肯定）

不过，我可以解释并向您展示这种平铺视图的基本原理。您的物品需要一个首选尺寸。在调整大小时，计算容器中可以容纳的项目数量，然后计算该值，这将为您提供适合首选大小的项目的确切数量，或者提供下一个更高数量的适合容器的项目

itemsPerRow = ceil(containerWidth / preferedSize)

现在您已经有了适合或必须适合的项目数量，请计算可能的缩放大小，然后将其应用于项目

scaledSize = containerWidth / itemsPerRow

您还需要决定如何定位项目。。。你可以让它们浮动：

但这可能有点离谱，定位它们看起来绝对更好：

正如我所说，这只是基础，但它应该让你开始

JSFIDLE示例的代码： 浮动 HTML

CSS

绝对定位 JS

CSS

.item {
    position: absolute;
    width: 200px;
    height: 200px;
    background-image: url('http://static.ddmcdn.com/gif/nasa.jpg');
    background-size: contain;
}

var grid = $('#grid');
var items = $('.item');

var preferedSize = 200;

function resize()
{
    var gridWidth = grid.width();
    var perRow = Math.ceil(gridWidth / preferedSize);
    var size = gridWidth / perRow;

    var row = 0;
    var col = 0;

    items.each(function(index, element)
    {
        var item = $(element);
        item.css({
            top: (row * size) + 'px',
            left: (col * size) + 'px',
            width: size + 'px',
            height: size + 'px'
        });

        col ++;
        if(index % perRow == perRow - 1)
        {
            row ++
            col = 0;
        }
    });
}

$(window).on('resize', resize);
resize();

.item {
    position: absolute;
    width: 200px;
    height: 200px;
    background-image: url('http://static.ddmcdn.com/gif/nasa.jpg');
    background-size: contain;
}