tiling images every nth child + something?

I have this code http://underwaterpistol.co.uk/snaps-old.html

I have a random number of images, and what I want to do is, every 1,2,3,4 image put in a div "box", in "big-box" I want every 5th image + "box" then I want img 6+7 to be floating next to it, the again image 8,9,10,11 in "box" and image 12 in "big box" with "box".

I've hard coded it by adding classes to each image and appending them into separate small boxes("box") and then taking the image after (by class name) and sticking it in "big box" along with "box".

My maths absolutely sucks, I think I'm looking to repeat a loop every 7th image.

$("<div class='box'></div>").prependTo("body");
    $(".first").appendTo(".box");
    $(".second").appendTo(".box");
    $(".third").appendTo(".box");
    $(".fourth").appendTo(".box");

    $("<div class='box2'></div>").prependTo("body");
    $(".fifth").appendTo(".box2");
    $(".box").prependTo(".box2");

    $("<div class='box3'></div>").appendTo("body");
    $(".eighth").appendTo(".box3");
    $(".ninth").appendTo(".box3");
    $(".tenth").appendTo(".box3");
    $(".eleventh").appendTo(".box3");

    $("<div class='box4'></div>").appendTo("body");
    $(".twelfth").appendTo(".box4");
    $(".box3").prep开发者_如何学运维endTo(".box4");

and the css

img{
    float:left;
    margin-right:1px;
    margin-bottom:1px;
}
.box, .box3{
    width:146px;
    height:146px;
    float:left;
    overflow:hidden;
}
.box2, .box4{
    width:146px;
    height:289px;
    float:left;
    overflow:hidden;
}

Someone has bound to have thought of this before now... any ideas?

Update - Working Example

no loops yet.. so if there was to be more than 14 (more than one collage)..it'd fail! this uses :first-child, :nth-child and jQuery's nextUntil()

I haven't got an answer as such as I 'still' don't quite know how to create jQuery loops

but here's what my logic would be if that's any help..

float:left; all images in the CSS and let wrappers do the work

Outer LOOP for each 14 img elements, then inside that loop

1. create a grid = wrapper div @ 1152 wide containing two divs @ 576 wide (floated side by side), with each if them containing an "inner" div @ 144 wide - like this - example

   all 14 images can be floated into this grid without any further "gridding" if you like

2. within this "14" loop create some more

   • for first 8 images, size them to 72x72 and alternately place them in (append them to) .left .inner and .right .inner so that each .inner div lands with 4 small images (they're floating left already so they will go into your positions)

   • for next two images size them 144*144 and alternately append them to .left .inner and .right .inner 1 for each, they will float below the 4 that's already there completing the inner divs

   • for next two images size to 144*288 and append them alternately to .left and .right this time.. they will float into the space beside the completed inner

   • for next two images size 288*288 and like above append to .left and .right again they will float into the space that's left in each div

That completes the 14 loop which I suppose can just be repeated? I'm still learning, if the images aren't right now you could manipulate them with CSS

From here you should have enough hooks to be able to swap float directions via the CSS you might need to change widths slightly for padding and whatnot (I included some in the updated demo), but I just tried to get the logic.

not sure if nth:child is the best option here, it's possible though, I did try it but because it needs loops it got to be just a set of overrides so I think some cleverer than me may be able to help more..

PS: I suggested the alternate placing for each loop of appending images as I think that's possibly easier to do than keeping counting.. but I could be wrong.. e.g. with the eight image it would make no difference if you append the first 4 to one and the next 4 to another rather the "one to you, one to me" approach

Great Question though, on my favourites as I would like to know the answer too :)