0

定義済みの幅を持つ CSS フローティング要素があり、それらを行から列に転置したいと考えています。浮動要素で通常行われているように、実際にそれらを行ではなく列で並べ替えられているように並べ替えます...

したがって、要素を列に配置する最も簡単な方法はfloat: left;、それらに対して使用することです。問題は、上から下と左から右ではなく、左から右と上から下に順序付けされることです (たとえば、行ではなく列で列とデータ フローを使用する電話帳で確認できます)。要素がアルファベット順に並べられている場合、行よりも列をたどる方が簡単なため、後者は非常に簡単に検索できます。

ともかく。

要素を上下左右の順序でリストする CSS3 列を使用できることはわかっていますが、問題は IEが IE9でもそれらをサポートしていないことです。

私が実際に必要としているもの

必要なのは、行ごとのフロート要素の数を決定し、それらを並べ替えて、上下左右の順序で表示される jQuery プラグインです。

もちろん、これは浮動要素が事前定義された固定幅を持っている場合にのみ機能します。そうでない場合は、とにかく列として表示されません。

質問

この機能用のプラグインがあるので、自分で作成する必要はありませんか? そうでなければ、私は明らかにしなければならないからです。

将来の参考のためのメモ：私はここで見つけることができるようなjQueryプラグインを書きました

4

3 に答える 3

1

プラグインがあるかどうかはわかりませんが、ここにあります (付属のフィドル: http://jsfiddle.net/58akv/1/ ):

jQuery:

    // This is me being lazy and not wanting to copy/paste box 50 times
    var box = $('div.box');
    for (var i = 1; i < 50; i++) {
        box.clone().text(i).appendTo(box.parent());
    }
    // Now that we have all elements
    var i = 0;
    // Specify how many you'd like per row, if you want to
    var rowsPerColumn = 0;
    var cols = 0;
    $('.box').each(function() {
        // remove float
        $(this).css("float", "none");

        if ($(this).parent('.col').length == 0) {
            // if rowsPerColumn is 0 or undefined, figure it out ourselves
            if (rowsPerColumn == 0 || !rowsPerColumn) {
                // calculate how many fit into given width
                var totalColumns = Math.floor($("#wrapper")[0].clientWidth / $(this).outerWidth(true));
                // calculate how many boxes go into each column
                rowsPerColumn = Math.ceil($('.box', '#wrapper').length / totalColumns);
            }
            // wrap this and next in col
            var parent = $(this).parent();
            var els = $(this).add($(this).siblings('.box').slice(0, rowsPerColumn-1));
            parent.append($('<div></div>').addClass('col').append(els).attr('id', 'col'+ (++cols).toString()))
        }
    });

CSS (例として):

.box {
    background-color: #333;
    width: 90px;
    height: 90px;
    margin: 5px;
    color: #eee;
    font-size: 2em;
    float: left;
}

.col { float: left; }

HTML (例として):

<div id="wrapper">
    <div class="box">0</div>
</div>
于 2011-07-28T14:15:33.373 に答える
0

これがプラグインです。試してみました、うまくいきます！ https://github.com/litera/jquery-transpose

于 2012-02-16T22:21:28.897 に答える
0

私は文字通り、プロジェクトのためにこのようなものをコーディングしただけだからです。アイテムのリストをアルファベット順に並べた UL がありましたが、列ごとに上/下ではなく、左から右に並べられていました。

次のスクリプトは、それに応じて LI を並べ替えます。

var $lists = $('ul.list');
var columnCount = 3;

// reorder the ul so that the columns are left to right and still alphabetized
$lists.each(function() {
    var $ul = $(this);
    var $newList = $('<ul class="list" />');
    var $lis = $ul.children('li');
    var itemCount = $lis.size();
    var leftovers = itemCount % columnCount;
    var itemsPerColumn = [];

    for (var i = 0; i < columnCount; i++){
      itemsPerColumn[i] = Math.floor(itemCount / columnCount) + (i < leftovers ? 1 : 0);
    }

    var offsetIndex = 0;
    var rowIndex = 0;

    $lis.each(function(i){
      var $li = $(this);
      var columnIndex = i % columnCount;
      $lis.eq(offsetIndex).clone().appendTo($newList)
      offsetIndex += itemsPerColumn[columnIndex];

      if (offsetIndex >= itemCount) offsetIndex = ++rowIndex;
    });

    $ul.replaceWith($newList);
});
于 2011-07-28T16:48:49.840 に答える