jquery - 当元素的高度改变时砌体自动调整

Question

我正在使用砌体来布置元素，如果描述太长，它会显示阅读更多链接。这将以 Accordion 样式打开其余文本。这是一个例子:http://www.ninesixty.co.nz/cubadupa18/?post_type=marcato_artist

我怎样才能强制砌体重新调整以适应这种情况？

这是mnasonry代码

        jQuery(window).load(function() {

  // MASSONRY Without jquery
  var container = document.querySelector('#masonry-content');
  var msnry = new Masonry( container, {
    itemSelector: '.grid_4',
    columnWidth: '.grid_4',                
  });  

    });

阅读更多代码: //DOM 就绪 $(函数() {

        var $el, $ps, $up, totalHeight;

        $(".sidebar-box .button").click(function() {

            // IE 7 doesn't even get this far. I didn't feel like dicking with it.

            totalHeight = 0

            $el = $(this);
            $p  = $el.parent();
            $up = $p.parent();
            $ps = $up.find("p:not('.read-more')");

            // measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
            $ps.each(function() {
                totalHeight += $(this).outerHeight();
                // FAIL totalHeight += $(this).css("margin-bottom");
            });

            $up
                .css({
                    // Set height to prevent instant jumpdown when max height is removed
                    "height": $up.height(),
                    "max-height": 9999
                })
                .animate({
                    "height": totalHeight
                });

            // fade out read-more
            $p.fadeOut();

            // prevent jump-down
            return false;

        });

    });

我是 jQuery 和 Javascript 的新手，所以请尝试任何易于理解的建议。

Answer 1

只需再次调用 masonry 函数来刷新它。

jQuery('#masonry-content').masonry();

如果你想要 或者 fadeOut 回调，你可以把它放在动画回调中。

        .animate({
                "height": totalHeight
            },500,function(){
             //Callback - after the animation is over
            jQuery('#masonry-content').masonry();
        });