jquery - 在 Jquery 中绑定窗口大小

Question

我正在开发同位素画廊，我遇到的问题是当窗口大小缩小或扩大时，图像有时会重叠，直到您再次单击导航。

使用时加载正常：

jQuery(window).load(function($) {

// <![cdata[ 
jQuery('.shortcode-portfolio').isotope({
    animationOptions: {
        duration: 750
    },
    animationEngine : 'best-available',
    itemSelector: '.thisportfolioitem'
});
// ]]> 

});

但是随后窗口有时会调整图像重叠的大小，我认为这是因为我使用 css 媒体来选择图像大小而不是图像上的内联高度和宽度。

现在当我这样做时：

jQuery(window).load(function($) {

        // <![cdata[ 
        jQuery('.shortcode-portfolio').isotope({
            animationOptions: {
              duration: 750
            },
            animationEngine : 'best-available',
            itemSelector: '.thisportfolioitem'
        });
        // ]]> 

    });
    jQuery(window).resize(function($) {

        // <![cdata[ 
        jQuery('.shortcode-portfolio').isotope({
            animationOptions: {
              duration: 750
            },
            animationEngine : 'best-available',
            itemSelector: '.thisportfolioitem'
        });
        // ]]> 

    });

一切都 100% 有效，但必须有更好的方法来做到这一点，因为它永远不会很好地加载相同的东西两次。

我可以请一些帮助使代码更好吗？

谢谢

Answer 1

// <![cdata[ 
jQuery(function() {
    var $shortcodePortfolio = jQuery('.shortcode-portfolio');
    $shortcodePortfolio.isotope({
        animationOptions: {
          duration: 750
        },
        animationEngine : 'best-available',
        itemSelector: '.thisportfolioitem'
    });

    jQuery(window).resize(function() {
        $shortcodePortfolio.isotope('reLayout');
    });
});
// ]]>

（稍微清理一下；cdata 可以而且应该包装所有内容。）