Javascript 图片洗牌

我有引导，我有缩略图设置显示一组图片。我想让缩略图保持不动。但是我希望图片在缩略图中发生变化，并将图像的大小调整到缩略图中

我希望缩略图保持在一个位置并保持大小

我希望图片在不同的缩略图之间移动，并调整其大小以匹配它所在的缩略图

我目前有一个脚本，可以在页面上随意移动缩略图：（我不想要的）

缩略图标记如下所示

<ul class="thumbnails" id="list">
    <li class="span4">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/360x270" alt="">
      </a>
    </li>
    <li class="span3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/260x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
    <li class="span3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/260x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
    <li class="span3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/260x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
    <li class="span3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/260x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
    <li class="span3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/260x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
</ul>

---

我可以对拖拽缩略图的脚本做什么更改，使其只拖拽图像，并使这些图像调整到它所在的缩略图？为了得到这个，我做了很多努力。我希望我能把我想要的问题说清楚

为

img

元素指定高度和宽度属性，如

<img src="http://placehold.it/360x270" alt="" width="360" height="270"/>

---

演示：

@Antony您更改了什么？删除了空格（缩进代码），并添加了一个标记。好的，谢谢。刚刚看到。@user2371301您是否能够为图像标记提供预定义的高度和宽度，如

缩略图仍在移动。@user2371301您所说的移动是什么意思是的，这不是我想要的。算了，我完了。我放弃这个想法。我希望缩略图保持大小和位置。只需使图片移动，并使图片调整到缩略图的大小。缩略图需要保持在一个1点。顺便说一下：您可以将引导css和js添加到该小提琴中。它不起作用。@user2371301如果使用引导，请将def更改为

，如中所示

<img src="http://placehold.it/360x270" alt="" width="360" height="270"/>

(function($){

    //+ Jonas Raoni Soares Silva
    //@ http://jsfromhell.com/array/shuffle [v1.0]
    function shuffle(o){ //v1.0
        for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    };

    $.fn.shuffle = function() {

        var srcs =  this.find('img').map(function(i, el){
            return el.src;
        });
        shuffle(srcs)

        return this.each(function(i){
            $(this).find('img').attr('src', srcs[i]);
        });
    };

})(jQuery);

$(function(){
    $('ul#list li').shuffle();
})