CSS zigzag浮动

时间：2010-10-02 15:00:28

标签： jquery css css-float

我正在寻找任何想法让以下工作。我需要重新排序（仅使用css！）无序列表以锯齿形方式输出其项目 - 让我解释一下：假设我们有一个简单的列表：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

这将输出（给定一个简单的浮点数：左）：

1   2   3   4   5    6
7   8   9   10  11  12

但我正在寻找一种输出方式：

1   3   5   7   9   11
2   4   6   8   10  12

为什么我需要这个？我尝试将缩略图导航更改为两行而不是一行（=＆gt; http://landofcoder.com/demo/jquery/lofslidernews/）

但正如我从Javascript中可以看到生成缩略图导航及其滑动机制，使其具有两列并仍然正常工作的唯一方法是获得这个有趣的之字形顺序。当然我对任何其他建议持开放态度:-)提前谢谢！

2 个答案:

答案 0 :(得分：2)

只有CSS3可以使用新的多列布局：

http://www.w3.org/TR/css3-multicol/

但是由于CSS3还没有稳定下来，简短的回答是否定的，这是不可能的。

然而，随着浏览器中整页缩放的引入，您现在可以制作像素相关的布局，以前不鼓励这样做。您知道列的大小，因此您可以使用不同的方法对齐它们。

答案 1 :(得分：0)

嗯，它花了比我预期的更长的时间（我必须学习如何编写一个插件），但我最终把一些东西放在一起做了你想要的东西。稍微提出警告，但我们稍后会谈到这一点。

在jsbin上有一个现场演示，显示你通过插件传递的列表，我给它的样式很少，但不是很广泛。显然，如果你点击“使用JS Bin编辑”按钮，你也可以编辑它。

jQuery完全在下面，它可以采用的选项（此时）的运行：

插件本身：

插件编辑（由后面公布的版本替换）。

如何调用它（如在jsbin演示中）：

$(document).ready(
  function() {
    $('#container').wrapSubs({
      rows: 2        
    });
  }
  );

如上所述，调用它将转换您自己的列表（虽然给出id'容器'）：

<ul id="container">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

进入以下内容：

<ul id="container">
        <li id="column_1">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
        </li>
        <li id="column_2">
            <ul>
            <li>3</li>
            <li>4</li>
            </ul>
        </li>
        <li id="column_3">
            <ul>
                <li>5</li>
                <li>6</li>
            </ul>
        </li>
        <li id="column_4">
            <ul>
                <li>7</li>
                <li>8</li>
            </ul>
        </li>
        <li id="column_5">
            <ul>
                <li>9</li>
                <li>10</li>
            </ul>
        </li>
        <li id="column_5">
            <ul>
                <li>11</li>
                <li>12</li>
            </ul>
        </li>
    </ul>

其他要点：

可以在任何包含子元素的元素上调用它，我没有针对可用的html元素的正典进行详尽的测试，但我已经验证它适用于：

  • 的div，
  • 图像，
  • 跨度，
  • 列出（dl除外）。

它似乎很乐意支持链接，虽然我没有努力让它与回调一起工作。主要是因为我在过去四个小时左右才学会了如何编写插件。

它没有做任何验证，因此垃圾进入会给你垃圾回收。或者，更准确地说，有很多html验证错误，但它会忠实地将你给它的html放在一起工作。它默认假设它将使用列表，但可以更改（链接的JS Bin显示它在段落上调用并将它们嵌套在blockquote和div中。

我不知道还有什么要说的，除了'你去的地方'。 =）

有任何疑问，请留言。否则，只有警告（我能想到的唯一一个，但可能还有更多），下面。

<小时/> 的警告： 因为我选择在数组上向后工作（为了避免在早期阶段搞乱像索引之类的东西），你会发现有时所有列都会有“正确”的项目数，而不是最后一个。

显然，我很乐意将这个发布给那些想要玩它并让它变得更好的人（它有效，我为自己编写它而感到非常自豪，但它仍然可以使用改进和润色）如果他们'我喜欢。

<小时/> 已编辑以包含稍加修订的插件版本：

(function($) {
    $.fn.wrapSubs = function(options) {
    options = $.extend($.fn.wrapSubs.defaults,options);

    // External vars, defaults or from user:
        var rows = options.rows; // number of 'rows' in each column
        var wrapper = options.wrapper; // the item in which 'objects' are wrapped
        var columns = options.columns; // the container of the wrapper
        var idPrefix = options.idPrefix; // the generated columns' id
        var orientation = options.orientation;
        var autofit = options.autofit;
        var thisId = $(this).attr('id');

    // Internal vars, from plug-in itself:  
        var numX = $(this).children().length;
        var cols = Math.ceil(numX/rows);
        var lastX = $(this).find(':last-child').index();

        if (orientation == 'vertical') {
            var colsOrRows = 'col';
            var cellOrientation = 'row';
        }
        else if (orientation == 'horizontal') {
            var colsOrRows = 'row';
            var cellOrientation = 'col';
        }

    // Sanity checks
        if (rows > numX) {
            rows = numX;
        }

            for (i=cols; i>0; i--) {
                $(document.createElement(columns))
                            .attr('id',idPrefix+i)
                            .addClass(orientation)
                            .prependTo($(this));
                $(document.createElement(wrapper))
                            .appendTo($('#'+ idPrefix +i));

                for (c=rows; c>0; c--) {
                    if (numX > 0) {
                        $(this).find(':last').addClass(cellOrientation)
                                .prependTo($('#'+ idPrefix +i+'>' + wrapper));

                        numX--;
                    }                   
                }

            }

        if (autofit && orientation == 'vertical') {
            var numCols = $('#'+thisId).find('.vertical').length;
            var colWidth = Math.floor($('#'+thisId).width()/numCols);
            $('.vertical').css('width',colWidth + 'px');
        }
        else if (autofit && orientation == 'horizontal') {
            var numCols = $('#'+thisId+'> .horizontal:last').find('.col').length;
            var colWidth = Math.floor($('#'+thisId).width()/numCols);
            $('.horizontal').find(columns).css({
                                'width':colWidth,
                                'margin': 0
                                }).parent().css({
                                'margin':0,
                                'width': '100%'});
            console.log(numCols);
        }

        return this;

    }
    $.fn.wrapSubs.defaults = {
        rows: 3,
        wrapper: 'ul',
        columns: 'li',
        idPrefix: 'column_',
        orientation: 'vertical',
        autofit: false
    };
})(jQuery);

此版本可以比之前（现在编辑的）版本稍微多做一些：

  1. 'rows'，实际上是您希望组合在一起的项目数。
  2. 'wrapper'是您希望每个组分组的容器。
  3. 'columns'是'包装器'的包装器（默认情况下，它适用于处理ul，而ul不能是另一个ul的直接后代）。
  4. 'idPrefix'，表示可以在同一页面中的多个元素上调用此插件（另请参见第7点）。
  5. 'orientation'，意味着这些课程将被明智地命名。 6'自动调整'，如果自动调整是true，那么脚本会根据父节点的宽度自动调整'行'。
  6. 脚本现在始终使用$(this)对象，而不是假设应用它的项目被称为#container。
相关问题
最新问题