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插件{{1}事件。

编辑：阻止图片移动

实现这一目标的最简洁，最简单的方法是为图像提供特定的类：

click

并更改此行：

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

到此：

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

在这种情况下，所有具有$('.Collage img:not(.dontMove)').shuffle();类的图像将始终保持原样，而其他图像将随机移动。

如何使用jquery-collagePlus来混合拼贴图像？

1 个答案: