使用 CSS 和 jQuery 自动排列 3 列文本答案

【问题标题】：flow 3 columns of text automatically with CSS and jQuery使用 CSS 和 jQuery 自动排列 3 列文本
【发布时间】：2013-04-28 22:54:43
【问题描述】：

我试图弄清楚如何使用 CSS 和 jQuery 自动排列文本。

以下是如何使文本流入两个堆栈（我在this page上找到的）：

<script type="text/javascript">
  $(document).ready(function() {
    var size = $("#data > p").size();
 $(".Column1 > p").each(function(index){
  if (index >= size/2){
   $(this).appendTo("#Column2");
  }
 });
  });
</script>

<div id="data" class="Column1" style="float:left;width:300px;">
<!--   data Start -->
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
<!--   data Emd-->
</div>
<div id="Column2" style="float:left;width:300px;"></div>

有没有办法把上面的JS转换成三列而不是两列？

我在想也许

<script type="text/javascript">
   $(document).ready(function() {
     var size = $("#data > p").size();
     $(".Column1 > p").each(function(index){
        if (index >= size/3){
           $(this).appendTo("#Column2");
    }
      });
     $(".Column2 > p").each(function(index){
        if (index >= size*2/3){
           $(this).appendTo("#Column3");
        }
      });
    });
</script>

<div id="data" class="Column1" style="float:left;width:250px;">
<!--   data Start -->
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
<!--   data Emd-->
</div>
<div id="Column2" style="float:left;width:250px;"></div>
<div id="Column3" style="float:left;width:250px;"></div>

但这不起作用 - 它仍然只是将其分成两列。

我很确定我错过了一些非常简单和小的东西，但我很困惑。

我想完成上述工作，而不是使用Columnizer jQuery Plugin，这对于我微薄的需求来说太过分了。

谢谢！ -蒂姆

【问题讨论】：

我能够使用我在问题中提到的 Columnizer jQuery 插件来解决这个问题。但是，我仍然想知道如何使用上面这种更简单的方法来完成三列布局。
我在我的答案中添加了一个附录，以解释您的代码为什么不起作用。

标签： jquery css multiple-columns

【解决方案1】：

您也可以使用 CSS3 多列：

#column
{
    moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
}

【讨论】：

我很想使用#column CSS3 标签，但我知道Internet Explorer 9 和更早的版本不支持多列属性。 w3schools.com/css3/css3_multiple_columns.asp
这有关系吗？原生实现会比你用 JS 做的任何东西都要好。如果你需要伪造它，总有一个 polyfill 在那里。

【解决方案2】：

这是一种简单的方法，您可以在任意数量的列之间划分段落：

http://jsfiddle.net/nate/F8zPs/1/

<div class="column">
<!--   data Start -->
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
<!--   data End-->
</div>

<div class="column"></div>
<div class="column"></div>

$(document).ready(function() {
    var $columns = $('.column'),
        $data = $columns.first().find('p'),
        size = $data.size(),
        columnSize = size / $columns.length;

    $data.each(function (index) {
        var column = Math.floor(index / columnSize);
        $(this).appendTo($columns.eq(column));
    });
});

另外，如果您想知道为什么您的代码无法运行，请在您的两个 each 语句中添加一个 console.log 来检查您获得的值。您在第一列上运行一个循环，然后在第二列上运行第二个循环。但是请记住：当您运行第二个循环时，以前的第三、第四、第五和第六个选项现在是第一、第二、第三和第四个，这意味着它们永远不会超过四个。

【讨论】：