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

Question

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

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

我知道他们使用的是响应式样式表，但是是什么决定了每一行中相册的数量？这是某种javascript吗？还是实际上是由响应式 CSS 样式表完成的？

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

Answer 1

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

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

itemsPerRow = ceil(containerWidth / preferedSize)

既然您有适合或必须适合的元素数量，请计算可能的缩放尺寸，然后您可以将其应用于元素

scaledSize = containerWidth / itemsPerRow

您还需要决定如何放置这些元素...您可以 float 它们:

http://jsfiddle.net/Uuaht/

但这可能有点不稳定，但定位它们绝对看起来更好:

http://jsfiddle.net/3wLZC/

正如我所说，这只是基础知识，但它应该可以帮助您入门。

jsfiddle 示例代码:

float

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