Masonry.js（用于html网格）。如何通过按下按钮自定义在#container resize上重新调整div

Question

masonry site

masonry.js

masonry.js插件在窗口调整大小时工作正常（它很好地重新划分div） 但是当我按下一个调整#container div大小的按钮时，我需要它重新网格化。虽然屏幕分辨率仍然相同。

var $container = $('#container');
// initialize
$container.masonry({  columnWidth: 200,  itemSelector: '.item'});

$container.masonry('bindResize')//resize on window resize

// =========================

eventie.bind( '#resize_button', 'click', function() {
// 
  document.getElementById('#container').style.width='70%';
//...................................
//       do the rearrangement 
//...................................
  }

Answer 1

更改容器的宽度后，需要触发砌体的layout()方法。

Check out this fiddle

JSCODE

$('document').ready(function () {

    var container = document.querySelector('.masonry');
    var msnry = new Masonry(container, {
        columnWidth: 60
    });

    $('#btn').on('click', function () {
        $('.masonry').css('width', '50%');
        msnry.layout();
    })

});