Question

我有这段代码http://underwaterpistol.co.uk/snaps-old.html

我有一个随机数量的图像，我想要做的是，每1,2,3,4个图像放在一个div“框”中，在“大框”中我想要每个第5个图像+“框“然后我希望img 6 + 7在它旁边漂浮，再次将图像8,9,10,11放在”方框“中，图像12放在”大盒子“中用”方框“。

我通过向每个图像添加类并将它们添加到单独的小框（“框”）中然后将图像（通过类名称）添加到“大框”中并将其粘贴到“框”中来对其进行硬编码”

我的数学非常糟糕，我想我想要每7个图像重复一次循环。

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

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

有人在此之前一定会想到这个......任何想法？

Answer 1

更新 - Working Example

还没有循环......所以如果有超过14个（不止一个拼贴画）..它会失败！这使用:first-child，:nth-child和jQuery的nextUntil()

~~我还没有得到答案~~我还“不太知道如何创建jQuery循环

但如果有任何帮助，这就是我的逻辑。

CSS中的

float:left; 所有图片，让包装工作完成工作

每个14 img元素的外部 LOOP，然后在该循环内

创建一个网格 =包装器div @ 1152 广泛包含两个div @ 576宽（并排浮动），每个包含一个“内部”div @ 144宽 - 就像这样 - example

如果您愿意，可以将所有14张图像浮动到此网格中，而无需进一步“网格化”

在这个“14”循环中再创建一些

对于前8张图片，将其大小设置为72x72，然后将它们放入（附加到）.left .inner和.right .inner，以便每个.inner div有4个小图像（它们已经向左浮动，所以它们会进入你的位置）

接下来的两张图片大小为144 * 144 并交替将它们附加到.left .inner 他们每人.right .inner 1 将漂浮在4已经下方有完成内部divs

以下两个图片大小为144 * 288 并将它们交替附加到.left 和.right这次......他们会漂浮在完成内部的空间

用于下两个图片大小 288 * 288和上面一样附加到.left和。{ .right他们将再次漂浮在空间中这是留在每个div

这完成了我认为可以重复的14循环？我还在学习，如果图像不正确，你可以用CSS操作它们

从这里你应该有足够的钩子，以便能够通过CSS交换浮动方向您可能需要稍微更改填充宽度以及诸如此类的东西（我在更新的演示中包含了一些内容），但我只是试图获得逻辑。

不确定nth:child是否是最好的选择，但是，我确实可以尝试但是因为它需要循环它只是一组覆盖所以我认为比我聪明的一些可能能够帮助更多..

PS：我建议每个附加图像循环的替代放置，因为我认为这可能比保持计数更容易...但我可能是错的...例如对于8个图像，如果你将前4个和第4个附加到另一个而不是“一个给你，一个给我”方法，那就不会有什么区别

很棒的问题，我最喜欢的，因为我也想知道答案：）

平铺图像每个第n个孩子+什么？

1 个答案:

更新 - Working Example