Javascript在洗牌时调整图像大小

好的，我有一些引导缩略图，设置了一个脚本，可以在缩略图中洗牌图像，或者

li

中的

a

元素，除了一些图像比其他图像大/小外，其他部分工作正常。我想让图像在洗牌时调整大小，以匹配

中允许的空间，这在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>

---

是的。基本上找到最近的li并使用其宽度/高度：

$.fn.shuffle = function() {

        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });

        this.each(function(i){

            // find nearest li and use its width / height
            var li = $(this).closest('li');
            var height = li.height();
            var width = li.width();
            $(this).height(height);
            $(this).width(width);

            $(this).replaceWith($(shuffled[i]));
        });

        return $(shuffled);

    };

---

您可以像这样洗牌li元素，而不是洗牌img元素：

$('ul#list li').shuffle();

?

我对您的代码进行了修改，看起来效果不错：

---

如果您不能做到这一点，另一个选择是直接将span类添加到img元素。

它们仍在根据图像大小进行调整。看一看：www.green-panda.com/website/panda/homepage.php（滚动至底部）我希望图像可以更改，但元素或跨度保持不变。有什么方法可以做到这一点吗？这就是我想要达到的目标。

$.fn.shuffle = function() {

        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });

        this.each(function(i){

            // find nearest li and use its width / height
            var li = $(this).closest('li');
            var height = li.height();
            var width = li.width();
            $(this).height(height);
            $(this).width(width);

            $(this).replaceWith($(shuffled[i]));
        });

        return $(shuffled);

    };

$('ul#list li').shuffle();