jquery - 将过滤器添加到 jquery collagePlus 插件

Question

我正在尝试将 mixitup 添加到 jquery collagePlus，但是当我单击过滤器时出现问题，它工作错误。有链接你可以看到

任何人都可以帮助我。如何解决？谢谢

Answer 1

我能够为最近的一个项目做到这一点。我拿了当前的演示并对其进行了修改。这是我的代码：

<script type="text/javascript">
// All images need to be loaded for this plugin to work so
// we end up waiting for the whole window to load in this example
$(window).load(function () {
    $(document).ready(function(){
        var orig_images = $('#portfolio').html();
        collage();

        $('.filters a').on('click', function(){
            $('#portfolio').html(orig_images);
            var filterClass = $(this).data('filter');
            $('#portfolio img:not(.' + filterClass + ')').remove();
            $('#portfolio img').css("opacity", 0);
            if (resizeTimer) clearTimeout(resizeTimer);
            resizeTimer = setTimeout(collage, 200);
            return false;
        });
    });
});

// Here we apply the actual CollagePlus plugin
function collage() {
    $('#portfolio').collagePlus(
        {
            'fadeSpeed'     : 2000,
        }
    );
};

// This is just for the case that the browser window is resized
var resizeTimer = null;
$(window).bind('resize', function() {
    $('#portfolio img').css("opacity", 0);
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(collage, 200);
});
</script>

然后这是我的 HTML：

<p align="center" class="filters">
    <a href="#" data-filter="wide">Wide</a>
    <a href="#" data-filter="tall">Tall</a>
</p>
<div id="portfolio"><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/300x200" width="300" height="200" class="wide" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/300x200" width="300" height="200" class="wide" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/300x200" width="300" height="200" class="wide" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/300x200" width="300" height="200" class="wide" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/300x200" width="300" height="200" class="wide" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/300x200" width="300" height="200" class="wide" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/300x200" width="300" height="200" class="wide" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/300x200" width="300" height="200" class="wide" /></div>

这基本上是在页面加载时，将原始 HTML 的副本保存在#portfolio div 中。为每个图像分配类，用作过滤器。添加了一些过滤链接。单击过滤器链接时，它会将#portfolio div 的原始HTML 恢复到#portfolio div 中。然后它会删除所有与单击的过滤器不匹配的图像（隐藏图像不起作用）。然后，在剩下的图像上重新启动 collagePlus 功能。