jquery - 如何使用 jquery-collagePlus 随机播放拼贴图像？

Question

我正在开发一个网站，我在其中使用 jquery-collagePlus 插件制作图像拼贴画。我想在点击洗牌按钮时动态地洗牌图像。 任何人对此有解决方案(或任何其他方法)然后请告诉我？

这是我的演示 Collage Test

这是我的代码:

$(window).load(function () {
     $('.Collage').collagePlus({
        'targetHeight'    : 300,
        'fadeSpeed'       : "slow", 
        'effect'          : 'default',
        'direction'       : 'vertical',
        'allowPartialLastRow'       : false
     });
    $('.Collage').removeWhitespace().collagePlus(); 
});

//HTML

<input name="shuffl" value="shuffle" type="button">
<section style="width:700px; " class="Collage effect-parent">
    <img src="../support/images/ed-lea-dribbble-2.png">
    <img src="../support/images/ed-lea-dribbble-3.png">
    <img src="../support/images/ed-lea-dribbble-4.png">
    <img src="../support/images/ed-lea-dribbble-6.png">
    <img src="../support/images/ed-lea-dribbble-1.png">
</section>

Answer 1

看到这个 Demo jsFiddle

您可以使用 this little pluggin 打乱 DOM 元素:

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

然后将您的collagePlus代码放入一个函数中:

function refreshCollagePlus() {
    $('.Collage').collagePlus({
        'targetHeight'    : 300,
        'fadeSpeed'       : "slow", 
        'effect'          : 'default',
        'direction'       : 'vertical',
        'allowPartialLastRow'       : false
    });
}

只需在 DOM 准备就绪时执行此操作:

$(document).ready(function () {
    $('#shuffle').on('click', function(){
        $('.Collage img').shuffle();
        refreshCollagePlus();
    });
    refreshCollagePlus();
});

这里的想法是初始化一次 collagePlus 插件，然后 shuffle 图像并“刷新” collagePlus 插件 #shuffle 按钮 click 事件。

编辑:防止图像移动

实现这一目标的最简洁、最简单的方法是为图像指定一个特定的类:

<img class="dontMove" src="http://placehold.it/800x600" />

并更改这一行:

$('.Collage img').shuffle();

为此:

$('.Collage img:not(.dontMove)').shuffle();

在这种情况下，所有具有 dontMove 类的图像将始终停留在它们所在的位置，同时其他图像将随机移动。