javascript - Masonry.js(用于 html 网格)。如何通过按按钮自定义 #container resize 上的 regrid 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

改变容器的宽度后，需要触发masonry的layout()方法。

Check out this fiddle

JS代码

$('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();
    })

});