1

私はhttp: //www.rdio.comUIに本当に感銘を受けました。（最初にログイン）

画面サイズによって決定される、行に入力されている中央のdivのアルバムカバーの数をどのように再編成するかを知りたいです。（スケールアップとスケールダウンを試してみてください）。

レスポンシブスタイルシートを使用していることはわかっていますが、各行のアルバム数の数を決定するものは何ですか？これはある種のJavaScriptですか？それとも、レスポンシブCSSスタイルシートによって実際に行われているのでしょうか。

同様のことを行うjQueryスクリプト/プラグインはありますか？

4

1 に答える 1

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;
}
于 2012-10-03T14:28:12.133 に答える