1

我有一系列图像让我们说

<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 似乎并不能解决问题。

4

3 回答 3

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();​

演示

于 2012-09-17T12:33:23.577 回答
1

我会这样做（这里有一个演示，您可能需要检查页面源以查看结果）：

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 来放入图像。

于 2012-09-17T12:41:42.490 回答
0

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

于 2012-09-17T12:21:37.493 回答