3

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

以下是如何使文本流入两个堆栈（我在此页面上找到）：

<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 转换成 if 流入三列而不是两列？

我在想也许

<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，这对于我微薄的需求来说太过分了。

谢谢！-蒂姆

4

2 回答 2

2

或者，您可以使用 CSS3 多列：

#column
{
    moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
}
于 2013-04-28T23:03:38.953 回答
1

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

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 以检查您获得的值。您在第一列上运行一个循环，然后在第二列上运行第二个循环。但请记住：当您运行第二个循环时，以前的第三、第四、第五和第六个选项现在是第一、第二、第三和第四个，这意味着它们永远不会超过四个。

于 2013-04-28T23:15:39.600 回答