flow 3 columns of text automatically with CSS and jQuery

Question

I am trying to figure out how to flow text automatically, using CSS and jQuery.

Here is how to make text flow into two stacks (which I found on 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>

Is there a way to convert the JS above so that if flows into three columns instead of just two?

I was thinking maybe

<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>

But that doesn't work - it still just splits it into two columns.

I'm pretty sure I'm missing something very simple and small, but I'm confounded.

I'd like to make the above work, rather than use the Columnizer jQuery Plugin, which is far too much for my meager needs.

Thank you! -Tim

I was able to solve this with the Columnizer jQuery Plugin I mentioned in my question. However, I'd still like to know how to accomplish a three-column layout with this more simple approach above. — Tim Wayne, Apr 28 '13 at 23:31
I've added an addendum to my answer to explain why your code isn't working. — Nate, Apr 28 '13 at 23:35

score 2 · Answer 1 · answered Apr 28 '13 at 23:03

2

Alternatively you can use CSS3 Multiple Columns:

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

answered Apr 28 '13 at 23:03

user2216267

491
3
8
21

I'd love to use the #column CSS3 tag, but I'm reading that Internet Explorer 9, and earlier versions, does not support the multiple columns properties. w3schools.com/css3/css3_multiple_columns.asp – Tim Wayne Apr 28 '13 at 23:20
Does it matter? Native implementation is going to be better than anything you can cook up with JS. If you need to fake it, there's always a polyfill out there. – cimmanon Apr 28 '13 at 23:57

Nate · Answer 2 · 2013-04-28T23:35:00.163

Here's a simple way you can divide your paragraphs between any number of columns:

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

Also, if you'd like to know why your code isn't working, throw a console.log in your two each statements to check the values you're getting. You run one loop on the first column, then a second loop on the second column. But remember: when you run the second loop, what used to be the third, fourth, fifth, and sixth options are now the first, second, third, and fourth, which means they never exceed four.

flow 3 columns of text automatically with CSS and jQuery

2 Answers2