javascript - Rdio.com 界面 - 连续重组专辑数量

Question

http://www.rdio.com的用户界面给我留下了深刻的印象。（先登录）

我想知道他们如何重新组织中央 div 中按行填充的专辑封面数量，由屏幕尺寸决定。（尝试放大和缩小它）。

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

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

Answer 1

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

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

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;
}