Question

我对http://www.rdio.com用户界面印象非常深刻。（先登录）

我想知道他们如何重新组织中央div中的专辑封面数量，这些专辑封面按行数填充，由屏幕大小决定。（继续上下调整）。

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

是否有任何类似的jQuery脚本/插件？

Answer 1

它已经完成了JavaScript，但我不知道任何特定的jQuery插件，除了masonry之外的其他特定jQuery插件（请注意，如果它可以做到这一点）。

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

itemsPerRow = ceil(containerWidth / preferedSize)

现在你有适合或必须适合的项目数量，计算可能会缩放的大小，然后你可以将其应用于项目

scaledSize = containerWidth / itemsPerRow

你还需要决定如何定位物品......你可以漂浮它们：

http://jsfiddle.net/Uuaht/

但这可能有点片状和东西，定位它们绝对看起来更好：

http://jsfiddle.net/3wLZC/

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

jsfiddle示例的代码：

浮动

HTML 的

<div id='grid'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>

JS

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;

    items.css({
        width: size + 'px',
        height: size + 'px'
    });
}

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

CSS

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

绝对定位

JS

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();

CSS

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

Rdio.com界面 - 重新组织连续的专辑数量

1 个答案:

jsfiddle示例的代码：

浮动

绝对定位