Question

我尝试根据项目的需要调整插件同位素（http://isotope.metafizzy.co/）。我需要通过增加其高度来同步重新定位容器内的项目。单击容器内的项目时，插件jQuery-Collapse（http://webcloud.se/jQuery-Collapse/）会增加高度。这里的小提琴：
http://jsfiddle.net/adzpx1k6/12/

如在示例中所见，高度元素位于下方 - 在重新计算位置时几乎没有跳跃。有必要避免它。我将不胜感激任何帮助！

Answer 1

我改为transitionDuration，slideDown＆amp; slideUp 替换这个jquery

$(function() {

    var $card_container = $('.card_view_wrapper').imagesLoaded(function() {
        $card_container.isotope({
            itemSelector      : '.card_item_wrapper',
            transitionDuration: 10,
            layoutMode        : 'moduloColumns',
            moduloColumns: {
                columnWidth: 302,
                gutter: 17
            }
        });
    });

    $('.collapsible_items').collapse({
        query: 'div h3',
        open: function() {
            this.slideDown(10, function() {
                $card_container.isotope('layout');
            });
        },
        close: function() {
            this.slideUp(10, function() {
                $card_container.isotope('layout');
            });
        }
    });

});

检查此网址 - http://jsfiddle.net/adzpx1k6/13/

同位素同步增长项目和重新定位项目

1 个答案: