Question

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

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

Answer 1

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

Answer 2

希望我做对了。

使用jQuery，你可以像this jsfiddle：

那样做

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

在服务器端使用PHP更有意义，但由于你没有数据库资源，你必须创建一个静态的image：array对，然后将其洗牌并生成随机列表。

<强>更新

也许这更接近解决方案：

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

来自图像数组的随机元素及其在页面刷新时的相应链接

2 个答案: