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

Question

我正在尝试调整同位素插件 (http://isotope.metafizzy.co/) 以满足我项目的需要。我需要通过增加高度来同步重新定位容器内的项目。单击容器内的项目时，插件 jQuery-Collapse (http://webcloud.se/jQuery-Collapse/) 会增加高度。这里的 fiddle:

http://jsfiddle.net/adzpx1k6/12/

如示例中所示，下方的高度元素不断增加 - 重新计算时很少跳起来位置。有必要避免it.I 不胜感激！

Answer 1

我改成 transitionDuration , slideDown & 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');
            });
        }
    });

});

检查这个 url - http://jsfiddle.net/adzpx1k6/13/

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

Isotope synchronous growth item and repositioning items

html

css

jquery

collapse

jquery-isotope