How tightly pack blocks of different heights and widths?

Question

JavaScript

Essence of the question. There is a layout in which blocks of different heights and lengths are located in a container. When the screen is reduced, the arrangement of the blocks should change places depending on the size of the window. This was realized through Masonry, Isotope. But when the screen is reduced, there are still empty "holes" between the blocks that are not occupied by adjacent elements. Is there any plugin that will calculate the free space and occupy it with the necessary blocks? Or are there other methods?

Answer 1

Perhaps it's just worth calling Masonry again, when resizing the object / screen?
Logically, he will have to rebuild the grid.

Answer 2

With such a call, Masonry is called 300 times, because responds to changes in each pixel. And yes, there are a lot of breakpoints. How to deal with it? Whether to prescribe on each point that? Below is the call code, maybe I make a mistake there?
$(window).resize(function () {
initMasonry();
});
function initMasonry(){
$('#main-block').masonry({
itemSelector: '.block',
columnWidth: 5,
layoutPriorities: {
upperPosition: 1,
shelfOrder: 0
}
});
}