re-parent images in columns

Question

After a couple of days with no luck finding any information that could guide me to a solution I am hoping you wiz-kids can help. The solution is properly quite straight forward but I am not sure what to search for.

Situation:

I am creating a column layout for image which is largely laid out with javascript but I need it to be flexible in terms of how many columns is needs to be - so can be from 1 to 20 eg.

So far my idea was to grab all the images which is located in my wrapper then say if I got 9 images and I have 3 columns then iterate over all of them but assign a class that corresponds to the columns ( from 1 to 3) and reparent them under new columns (divs) which I have created on the fly.

The HTML markup is as following with 9 example images:

<div id="imgWrapper">
    <img src="http://placekitten.com/301/300" class="flexImg">
    <img src="http://placekitten.com/302/300" class="flexImg">
    <img src="http://placekitten.com/303/300" class="flexImg">
    <img src="http://placekitten.com/304/300" class="flexImg">
    <img src="http://placekitten.com/305/300" class="flexImg">
    <img src="http://placekitten.com/306/300" class="flexImg">
    <img src="http://placekitten.com/307/300" class="flexImg">
    <img src="http://placekitten.com/308/300" class="flexImg">
    <img src="http://placekitten.com/309/300" class="flexImg">
</div>

The CSS is:

#imgWrapper{
    /*No styles for the imgWrapper as it's just for selecting so far*/
}
img.flexImg{    
    width: 100% ;
    height: auto ;
    float: left;
    position: relative; 
}
.column{
    float: left;
    position: relative;
    /* the width is img-wrapper (which is 100%) devided by how many columns */
    width: 33.3% ;
    height: auto;
}

Case:

1. Lets say I want to have 3 columns then I would set that as a varibe in my js.
2. Then I want to create 3 called flexi-column-01, flexi-column-02 and flexi-column-03.
3. Then I want to take all the images contained in <div id="imgWrapper"> and add the first image to the first div then the second to the second div and third img to the third div THEN I want to add the forth image to the first div and so forth...

I have tried various way by adding all the images from the <div id="imgWrapper"> to an array and then slicing that and adding them to the new divs but with no luck.

The best I've come up with so far is the following which works but is not flexible in terms of how many columns I can have.

$(document).ready(
  function flexiColumns () {
    var wrapper     = $('div#imgWrapper'),
        selSize     = wrapper.children('img').length,
        colCount    = 3,
        colSize     = selSize / colCount,
        colEntries  = $(wrapper).find('img').addClass('flexi-img-selector');

        colOne      = $(wrapper).append('<div class="columnOne" />'),
        colTwo      = $(wrapper).append('<div class="columnTwo" />'),
        colThree    = $(wrapper).append('<div class="columnThree" />'),

        firstCol    = $('img.flexi-img-selector:nth-child(3n+1)').addClass('first'),
        secondCol   = $('img.flexi-img-selector:nth-child(3n+2)').addClass('second'),
        thirdCol    = $('img.flexi-img-selector:nth-child(3n+3)').addClass('third');

         // CREATE THE BLOCK COLUMNS
        for (var i = 0; i <  colCount; i++){
         $(wrapper).append('<div class="flexi-column-0' + i + '" />')

        }

   $(firstCol).appendTo($('.columnOne'));
   $(secondCol).appendTo($('.columnTwo'));  
   $(thirdCol).appendTo($('.columnThree'));
  } // END FUNCTION FLEXICOLUMN
); // END DOCUMENT READY

I've put together a jsfiddle of what I have so far if that is a help: http://jsfiddle.net/Djk9e/

Any form of guidance or recommendation on how I can approach this is more than welcome. Please let me know if you need more information or examples.

Thank you in advance, Sofus

Answer 1

Only a quick draft for a possible solution:

for (var i = 0; i <  colCount; i++){
      $(wrapper).append('<div class="column" id="col_'+i+'" style="width:' + colSize + '%;" />');

      var images = $('img').splice(0, Math.round(selSize/colCount));
      $(images).appendTo($('#col_'+i));
    }

http://jsfiddle.net/Djk9e/15/

Column width is calculated dynamically - no need for static css selectors with markup.

Idea behind it: slice array of images and append it to its wrapping column (does only match if column count and images pair!). afterwards select remaining images and allocate them by its index to columns.

This is NO complete solution and quite hacky - do not use this in an productive environment ;)