1

サムネイル内の画像またはa要素内の要素をシャッフルするスクリプトを使用して、いくつかのブートストラップ サムネイルをセットアップしましliた。シャッフル時に画像のサイズを変更して、許可されているスペースに一致させ<li class="span#">たい

ブートストラップ サムネイル:

<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;
}
4

2 に答える 2

0

img 要素をシャッフルする代わりに、次のように li 要素をシャッフルできますか。

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

?

私はあなたのコードでフィドルを作成しましたが、うまく動作しているようです:確認してください

それができない場合は、span クラスを img 要素に直接追加するという別のオプションがあります。

于 2013-05-21T08:24:11.467 に答える