jQuery - 在窗口调整大小时重置 var / Refresh var

Question

我正在使用具有以下功能的 jQuery 插件：

var $el  = $(this),

$wrapper = $el.find('div.ca-wrapper'),

$items   = $wrapper.children('div.ca-item'),

cache    = {};

// save the with of one item    

cache.itemW      = $items.width();

// save the number of total items

cache.totalItems = $items.length;

我的问题是我需要得到的 div 的宽度是流动的：它是 33% 的包装器。该插件在页面加载时运行良好，但在调整窗口大小时会变得非常难看。

我认为我需要在调整大小时再次获取 var，除非您能想到更好的选择。

这是 WIP 的链接：http://arielodiz.com.ar/test/（向下滚动到“投资组合”）

这是原始插件：http://tympanus.net/codrops/2011/08/16/circular-content-carousel/

Answer 1

问题是插件使DIV绝对定位并且不会自动刷新调整大小的位置。

一个快速的解决方案（虽然不是一个好的解决方案）是在调整窗口大小时再次初始化插件：

$(window).resize(function() {
    $('#ca-container').contentcarousel({
        scroll : 2
    });
});

---

更好的解决方案是在插件本身的 init 方法中绑定 resize 事件 - 可能添加一个选项来控制它 - 以在调整窗口大小时重新进行计算并重新定位元素。

根据浏览器的不同，resize 事件会触发多次或仅在调整大小完成时触发，因此我使用 150 毫秒的超时时间，这将在鼠标停止移动时重新计算...

这是要在 init 方法中添加的代码（请参阅小提琴中的正确位置）。

var resizeTimer;
// bind the resize event of the window
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        // re-select the items in the order they are now
        var $elements = $wrapper.children('.ca-item');
        // re-calc the width
        cache.itemW = $elements.width();
        // change position accordingly
        $elements.each(function(i) {
            $(this).css({
                left: i * cache.itemW + 'px'
            });
        });
    }, 150);
});

DEMO