Question

我有一系列的图像让我们说

<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
<img src="6.jpg" />

等等。

我需要做的是在div中包含随机的1,2或3个元素。所以结果将是

<div>
 <img src="1.jpg" >
</div>
<div>
 <img src="2.jpg" ><img src="3.jpg"><img src="4.jpg">
</div>
<div>
 <img src="5.jpg" ><img src="6.jpg" >
</div>

任何想法如何做到这一点？

谢谢！

------编辑------- 如何做同样的事情，但这次图像被包裹在一个？简单地替换Bojan中的img似乎没有办法......

Answer 1

这是一个非常简单的例子

这是html

<div id="container">
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
</div>

这是javascript

function wrapInsideDiv(){
    while($("#container>img").length > 0){
        var images = Math.floor(Math.random() * 4) + 1;
        var div = $("<div/>");
        $("#container").append(div);
        $("#container>img").each(function(index, elem){
            if(index + 1 < images){
             $(elem).appendTo(div);
            }
        });
    }
}
wrapInsideDiv();

Demo

Answer 2

我会这样做（HERE'S A DEMO，您可能需要检查页面来源以查看结果）：

HTML

<img src="img.png" />
<img src="img.png" />
<img src="img.png" />
<img src="img.png" />
<!-- etc. ->

<div id="container"></div>

JS

var randomNr, currentDiv;

$("img").each(function(){
    // if this is the first iteration, or if randomNr is larger than 3
    if(randomNr == undefined || randomNr > 3){
        // get a new random nr between 1 and 3
        randomNr = randomXToY(1, 3);
        // create a new div to put the images in
        currentDiv = $("<div></div>");
        $("#container").append(currentDiv);
    }

    // move image to currentDiv
    $(this).appendTo(currentDiv);
    randomNr++;   
});


// function to get random number
function randomXToY(minVal,maxVal){
    var randVal = minVal+(Math.random()*(maxVal-minVal));
    return Math.round(randVal);
}

这将生成1到3之间的随机nr，在所有图像上循环，并从该数字计数最多3个。每次随机数大于3时，都会创建一个新的div来放置图像。

Answer 3

为每个图像和javascript或jquery提供一个id，生成一个随机数或一系列随机数，并使用此变量抓取它们并将它们推送到您可能需要的某些div中。

将图像放在容器div中，每组包含1个，2个或3个元素的随机组

3 个答案: