jquery - Isotope elements only refresh on page refresh

Question

I am trying out the isotope jquery to rearrange a portfolio.

I want the website to be responsive so I have set the elements in the container to be 22% wide.

However all looks fine when I load the page for the first time. Or refresh it. But if I resize the page, the elements width changes fine but they have a large gap between them.

The same thing happens when testing it on the ipad roasting between portrait and landscape.

Why don't they automatically move into their new position until the page is refreshed? Here is an example. The section I am talking about is the 'featured' boxes.

Http://www.comeinside.co.uk

Answer 1

从来没有使用过这个插件，但是在谷歌搜索之后，看起来他的演示做了你想要的：http: //isotope.metafizzy.co/demos/fluid-responsive.html

// update columnWidth on window resize
$(window).smartresize(function(){
  $container.isotope({
    // update columnWidth to a percentage of container width
    masonry: { columnWidth: $container.width() / 5 }
  });
});