Question

我正在使用砌体布局项目，如果描述太长，则会显示更多链接。这将以手风琴风格打开其余文本。以下是一个示例：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',                
  });  

    });

这是readmore代码： // DOM Ready $（function（）{

        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

再次调用砌体功能刷新。

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

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

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

当物品的高度发生变化时，砌体会自动调整

1 个答案: