Reloading masonry content

问题

I am trying to update the layout of a masonry page when the height of an element is changed. I would like the elements to automatically re-fit like they do if you resize the window. I have tried numerous methods and am now at this which seems to do nothing:

function masonryReload() {
                jQuery('#container').masonry('reloadItems');
            }

Am I missing something here or is there another method that is better suited to what I want?

If anyone has any experience with this, it would be much appreciated.

---

UPDATES: JS Function:

function masonryReload() {
            jQuery('#container').masonry('reload');
        }

HTML:

 <li id="logo" style="padding-right: 25px;" onclick="masonryReload();"><img src="<?php bloginfo('template_directory'); ?>/img/logo.png"></li>

回答1:

.masonry('reload')

It's defined in the docs, however simply using .masonry() again should do the trick.

---

Following your code. Move away from the inline onclick handler, and put it all inside JS:

HTML

<li id="logo" style="padding-right: 25px"><img src="<?php bloginfo('template_directory'); ?>/img/logo.png"></li>

JS

function masonryInit() {
    jQuery("#container").masonry();
    console.log("It works!");
}

jQuery(document).ready(function() {
    masonryInit();
    $("#logo").click(masonryInit());
});

来源：https://stackoverflow.com/questions/34320031/reloading-masonry-content