Question

我试图弄清楚如何使用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，这对我的微薄需求来说太过分了。

谢谢！ -Tim

Answer 1

或者，您可以使用CSS3 Multiple Columns：

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

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

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

使用CSS和jQuery自动流动3列文本

2 个答案: