Javascript 页面刷新时图像数组及其各自链接中的随机元素

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

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

var img_array=[]//假设你的数组名为this，并且满是色情图片
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);
}

//fisher-yates算法。谷歌it
（功能（）{
var tmp，current，top=img_array.length；
如果（顶部）而（--顶部）{
当前=数学地板（数学随机（）*（顶部+1））；
tmp=img_阵列[当前]；
img_阵列[当前]=img_阵列[顶部]；
img_阵列[top]=tmp；
}
})();
//附加图像的目标html元素
var target=document.getElementById（'someTargetDiv'）；
对于（var i=0，len=img_array.length；i我希望我能得到正确的结果

使用jQuery，您可以像这样做：

在服务器端使用PHP会更有意义，但由于您没有db资源，所以必须创建一个静态的image:link对数组，然后将其洗牌并生成一个随机列表

更新

也许这更接近于一个解决方案：


您的源代码/HTML是硬编码的还是从某种后端/CMS中获取的？@m90是的，都是手写的HTML。您的意思是随机排序图像？因此，如果您只是想找到一种方法将
href
链接到
li
，您可以使用
data
-属性来存储
href
，然后重新排列
li
调用您的lightbox？啊，对不起。应该更具体一些。我不希望对li进行洗牌，只希望刷新时每个li图像都是随机的。li顺序将保持不变。您可以使用文档片段（）而不是像在最后一个代码块中那样生成字符串这就解决了您提到的创建和附加DOM的问题，同时保持DOM的美观和可读性。Thor，我过去也使用并推荐documentFragment方法。但是，近年来，所有主要浏览器中的优化都大大减少了对该技术的需要。在所有浏览器都可以使用，而且速度与John最近描述的技术一样快，甚至更快。不管你喜欢什么，我并没有考虑速度，而是考虑可读性。虽然容易阅读和理解，但这种方法是有偏见的（）这通常是不可取的。在这种情况下，你说有偏见是什么意思？有偏见的人不会有一个均匀的分布。我已经添加了一个对评论的引用。是的，我知道，我刚刚删除了一条关于m90的评论，它不像Fisher-Yates shuffle那样随机，但我认为，既然这不是一个科学计算的案例，人们可以忽略它我并不是说你的答案是错误的或无用的，只是任何看到答案的人都应该意识到这是一种偏见，他们可能不想基于此使用它。
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('');

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

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