1

我有一个无序列表的图像。我希望这些图像中的每一个都具有 href 属性（因为我想在单击时使用灯箱弹出窗口来显示相关图像），但是在刷新页面时每个图像都是随机的。

简而言之，对于每个图像加上它的href 是随机的，但ul 的顺序保持不变。实现这一目标的方法是什么？

4

2 回答 2

2 
var img_array = []; //assuming your array is called this and full of porn pictures

//fisher-yates algorithm. Google it
(function(){
    var tmp, current, top = img_array.length;
    if(top) while(--top) {
        current = Math.floor(Math.random() * (top + 1));
        tmp = img_array[current];
        img_array[current] = img_array[top];
        img_array[top] = tmp;
    }
})();

//target html element where the images are appended
var target = document.getElementById('someTargetDiv');

for(var i=0, len=img_array.length; i<len; i++){
    var link = document.createElement('a'),
        img = document.createElement('img');

    link.setAttribute('href', img_array[i]);
    img.setAttribute('src', img_array[i]);

    link.appendChild(img);
    target.appendChild(link);
}

这不是进行此类操作的优化方式。为了您的理解，我已经使它稍微冗长了。

这段代码最大的错误是不断创建许多不同的元素，并一次将它们附加到 DOM 中。真正应该做的是构建一串生成的html，并在一次操作中更改目标div的innerHTML。

var html = [];
for(var i=0, len=img_array.length; i<len; i++){
    html.push('<a href="'+ img_array[i] +'"><img src="'+ img_array[i] +'"></a>');
}

target.innerHTML = html.join('');
于 2012-09-25T12:08:10.100 回答
0

希望我做对了。

使用 jQuery，你可以这样做jsfiddle：

$('ul').children('li').sort(function() {
    return Math.round(Math.random()); // randomly get 0 or 1
}).appendTo('ul');

在服务器端使用 PHP 会更有意义，但由于您没有数据库资源左右，您必须制作一个静态数组 image:link 对，然后对其进行洗牌并生成一个随机列表。

更新

也许这更接近解决方案：

jsfiddle

var contents = new Array(),
    $list = $('li');

$list.each(function() { contents.push($(this).children()); });

contents.sort(function() {
    return 0.5 - Math.random();
});

$list.each(function() {
    $(this).append(contents.shift());
});
于 2012-09-25T12:10:03.507 回答