мозаичное изображение каждого n-го ребенка + что-то?

Question

У меня есть этот код http://underwaterpistol.co.uk/snaps-old.html

У меня есть случайное количество изображений, и я хочу, чтобы каждое 1,2,3,4 изображение помещалось в блок "div", в поле "big-box", которое я хочу, чтобы каждое 5-е изображение + " «тогда я хочу, чтобы рядом с ним плавало изображение 6 + 7, снова изображение 8,9,10,11 в« коробке »и изображение 12 в« большой коробке »с« коробкой ».

Я жестко запрограммировал его, добавив классы к каждому изображению и добавив их в отдельные маленькие блоки («прямоугольник»), а затем взяв изображение после (по имени класса) и вставив его в «большой прямоугольник» вместе с «прямоугольником». ».

Моя математика абсолютно отстойная, я думаю, что хочу повторить цикл для каждого седьмого изображения.

$("<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").prependTo(".box4");

и КСС

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

Кто-то должен был подумать об этом до сих пор ... есть идеи?

Answer 1

---

Обновление - Рабочий пример

пока нет циклов ... так что, если должно было быть больше 14 (более одного коллажа) ... это бы не получилось!это использует :first-child, :nth-child и jQuery's nextUntil()

---

У меня нет такого ответа, как Я все еще не понимаюЯ не знаю, как создавать циклы jQuery

, но вот какая у меня логика, если это поможет ...

float:left; все изображения в CSS и пустьобертки делают работу

Outer LOOP для каждого 14 img элементов, затем внутри этого цикла

1. создать сетку =div div шириной 1152, содержащий два div @ шириной 576 (плавающие рядом), каждый из которых содержит «внутренний» div @ 144 ширины - вот так - пример

   все 14изображения могут быть перемещены в эту сетку без каких-либо дополнительных «привязок», если вам нравится

2. в этом цикле «14», создайте еще несколько

   • для первых 8 изображений, измените их размер до 72x72 и поочередно поместите их в (добавьте их) .left .inner и .right .inner, чтобы каждый .inner div попадал с 4 маленькими изображениями (они всплываютушли уже, чтобы они заняли ваши позиции)

   • для следующих двух изображений размером 144 * 144 и попеременно добавляем их к .left .inner и .right .inner1 для каждого, они будут плавать ниже 4, который уже существует, завершая внутренние деления

   • для следующих двух изображений размером до 144 * 288 и добавляя их поочередно к .left и .right на этот раз .. они всплывают в пространство рядом с заполненным внутренним

   • для следующих двух изображений размером 288 * 288 и аналогичных выше.до .left и .right снова они будут перемещаться в пространство, оставшееся в каждом div

Это завершает цикл 14, который, я полагаю, можно просто повторить?Я все еще учусь, если изображения не сейчас, вы можете манипулировать ими с помощью CSS

Отсюда у вас должно быть достаточно хуков, чтобы иметь возможность менять направления перемещения с помощью CSS, вам может потребоваться немного изменить ширинудля заполнения и еще много чего (я включил некоторые в обновленную демонстрацию), но я просто попытался получить логику.

не уверен, что nth:child - лучший вариант здесь, возможно, хотя, я пробовал это, нопотому что для этого нужны циклы, он должен быть просто набором переопределений, поэтому я думаю, что некоторые умнее меня могут помочь больше ..

PS: я предложил альтернативное размещение для каждого цикла добавления изображений, как мне кажетсяэто, вероятно, легче сделать, чем продолжать считать ... но я могу ошибаться ... например, с восьмью изображениями не будет никакой разницы, если вы добавите первые 4 к одному, а следующие 4 к другому, а не к одному , один для меня"подход

Отличный вопрос, хотя, на моих любимых, как я хотел бы знать ответ тоже:)