Javascript 在随机播放时调整图像大小

Question

好的，我设置了一些 Bootstrap 缩略图，其中包含一个脚本，该脚本可以对缩略图或 a 内的图像进行随机排列。 li 内的元素除了某些图像比其他图像更大/更小之外，这些部分工作正常。我希望随机调整图像大小以匹配 <li class="span#"> 中允许的空间这在 javascript 中可以用我拥有的功能实现吗？

Bootstrap 缩略图:

<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>

Javascript:

    <script> window.onload = function()
                {
                   $('ul#list li img').shuffle();
                };
         </script>

        <script>
        (function($){

    $.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){
            $(this).replaceWith($(shuffled[i]));
        });

        return $(shuffled);

    };

})(jQuery);
        </script>

span#在 CSS 中看起来像这样:

 .span4 {
  width: 300px;
}

.span3 {
  width: 220px;
}

.span2 {
  width: 140px;
}

Answer 1

除了打乱 img 元素之外，您可以像这样打乱 li 元素吗:

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

？

我用你的代码创建了一个 fiddle ，它似乎工作正常:Check it out

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