如何使用 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);

然后将您的collagePluscode 放入一个函数中：

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 图像并在#shuffle 按钮click 事件上“刷新”collagePlus 插件。

编辑：防止图像移动

实现这一目标的最简洁和最简单的方法是给图像一个特定的类：

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

并改变这一行：

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

到这里：

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

在这种情况下，所有具有dontMove 类的图像将始终保持在原处，而其他图像将随机移动。